Copyright: ©98 R.E. Harvey. All rights reserved
Citation: <!--From HTMLcat (C)98 R.E. Harvey, P.O. Box 5695, Glendale AZ 85312-->


 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

Articles

Reference

Support

Start Here


Contents - Character Tags
 Contents

Character Tags

!-- - Tag a hidden comment

ACRONYM - Display an acronym

B - Display bold text

BASEFONT - Define default font

BDO - Override bi-directional text

BIG - Display larger text

BLINK - Display text blinking

CITE - Format citation reference

COMMENT - Mark hidden comment

CODE - Format text as source code example

DFN - Format text as a definition

EM - Emphasize text (italic)

FONT - Define font display properties

I - Display italic text

KBD - Display text fixed-pitch bold

MARQUEE - Scrolling ticker-tape

NOBR - Display text without word-wrap

Q - Format text as a quotation

S - Display strike-out text

SAMP - Display small, fixed-pitch text

SMALL - Display small text

SPAN - Define document section style

STRIKE - Display strike-out text

STRONG - Display heavy, emphasized text

SUB - Display subscript text

SUP - Display superscript text

TT - Display fixed-pitch teletype text

U - Display underlined text

VAR - Display small italic text

WBR - Optional word break

XMP - Display fixed-pitch text

Articles & Reference

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

Articles

Reference

Support

Start Here


Contents - Character Tags
<<


Contents - Character Tags: Articles
 Contents

Character Tags

!-- - Tag a hidden comment

ACRONYM - Display an acronym

B - Display bold text

BASEFONT - Define default font

BDO - Override bi-directional text

BIG - Display larger text

BLINK - Display text blinking

CITE - Format citation reference

COMMENT - Mark hidden comment

CODE - Format text as source code example

DFN - Format text as a definition

EM - Emphasize text (italic)

FONT - Define font display properties

I - Display italic text

KBD - Display text fixed-pitch bold

MARQUEE - Scrolling ticker-tape

NOBR - Display text without word-wrap

Q - Format text as a quotation

S - Display strike-out text

SAMP - Display small, fixed-pitch text

SMALL - Display small text

SPAN - Define document section style

STRIKE - Display strike-out text

STRONG - Display heavy, emphasized text

SUB - Display subscript text

SUP - Display superscript text

TT - Display fixed-pitch teletype text

U - Display underlined text

VAR - Display small italic text

WBR - Optional word break

XMP - Display fixed-pitch text

Articles & Reference

 Introducing Fonts	 Special Characters

 Font Samples	 Character Conversion Table

 Icon Symbols	 Font Compatibility

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

Articles

Reference

Support

Start Here


Contents - Character Tags
<<


Contents - Paragraph Tags
 Contents

Character Tags

Paragraph Tags

!-- - Tag a hidden comment

ADDRESS - Define mailing address

BDO - Override bi-directional text

BLOCKQUOTE - Indent left/right margins

BR Start a new line of text

CENTER - Display text centered

COMMENT - Mark a hidden comment

DEL - Mark text deletions

DIV - Document section division

H1, H2... - Tag section headline

INS - Mark text insertions

LISTING - Display fixed-pitch text

MULTICOL - Define multiple-column document

NOBR - Display text without word-wrap

P - Start paragraph

PLAINTEXT - Display fixed pitch text

PRE - Display fixed-pitch text

SPACER - Add extra blank space (Netscape)

WBR - Optional word break

XMP - Display fixed-pitch text

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

Articles

Reference

Support

Start Here


Contents - Document Tags
 Contents

Character Tags

Paragraph Tags

Document Tags

!DOCTYPE - Describe HTML version compliance

  !DOCTYPE Declarations

A - Anchor tag or reference anchor

BASE - Identify document's URL address

BASEFONT - Define default font

BGSOUND - Play a sound while the document loads

BODY - Define look of document

DEL - Mark text deletions

EMBED - Tag embedded object

HEAD - HTML document head

HTML - Tag beginning of HTML document

INS - Mark text insertions

ISINDEX - Tag an index for search engines

LABEL - Define control label

LINK - Define link between documents

META - Define document information

NEXTID - Define next link name ID

SOUND - Play background sound (Mosaic)

TITLE - Set document window title

Articles & Reference

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

Articles

Reference

Support

Start Here


Contents - Character Tags
<<


Contents - Document Tags: Articles
 Contents

Character Tags

Paragraph Tags

Document Tags

!DOCTYPE - Describe HTML version compliance

  !DOCTYPE Declarations

A - Anchor tag or reference anchor

BASE - Identify document's URL address

BASEFONT - Define default font

BGSOUND - Play a sound while the document loads

BODY - Define look of document

DEL - Mark text deletions

EMBED - Tag embedded object

HEAD - HTML document head

HTML - Tag beginning of HTML document

INS - Mark text insertions

ISINDEX - Tag an index for search engines

LABEL - Define control label

LINK - Define link between documents

META - Define document information

NEXTID - Define next link name ID

SOUND - Play background sound (Mosaic)

TITLE - Set document window title

Articles & Reference

 The HTML Document	 How Do I

 Portability	 Essential HTML Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

Articles

Reference

Support

Start Here


Contents - Character Tags
<<


Contents - Picture Tags
 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

A - Anchor tag or reference anchor

AREA - Define part of an image map

BGSOUND - Play a sound while the document loads

EMBED - Tag embedded object

IMG - Insert a picture

LABEL - Define control label

MAP - Define picture hot-spot

OBJECT - Insert object on page

SOUND - Play background sound (Mosaic)

  Introducing Pictures

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

Articles

Reference

Support

Start Here


Contents - Color Tags
 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

BASEFONT - Define default font

BODY - Define look of document

FONT - Define font display properties

HR - Draw horizontal line

MARQUEE - Scrolling ticker-tape

TABLE - Define a table

TD - Define a table cell

TH - Define a table heading

TR - Format a table row

Articles & Reference

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

Articles

Reference

Support

Start Here


Contents - Character Tags
<<


Contents - Color Tags: Articles
 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

BASEFONT - Define default font

BODY - Define look of document

FONT - Define font display properties

HR - Draw horizontal line

MARQUEE - Scrolling ticker-tape

TABLE - Define a table

TD - Define a table cell

TH - Define a table heading

TR - Format a table row

Articles & Reference

 Introducing Color	 Color Swatches

 Applying Color	 Color Experiments

 Color Names	 Introducing Pictures

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

Articles

Reference

Support

Start Here


Contents - Character Tags
<<


Contents - List Tags
 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

DIR - Start a directory list

DL - Start a definition list

DT - Term in definition list

LI - Tag list item

MENU - Define menu-style list

OL - Define ordered list

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

Articles

Reference

Support

Start Here


Contents - Table Tags
 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

COL - Define table column

COLGROUP - Table column properties

TABLE - Define a table

TBODY - Define table body

TD - Define a table cell

TFOOT - Define table footer

TH - Define table heading

THEAD - Define table header

TR - Format table row

  Introducing Tables

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

Articles

Reference

Support

Start Here


Contents - Form Tags
 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

BUTTON - Define a button

FIELDSET - Define a group of controls

FORM - Define a form

INPUT - Define input box

LABEL - Define control label

LEGEND - Assign caption to FIELDSET

OPTGROUP - Group options in a form

OPTION - Define list box choice

SELECT - Define drop-down or list box

TEXTAREA - Define multiple-line data entry box

  Introducing Forms

Frame Tags

Object Tags

Script Tags

Style Tags

Articles

Reference

Support

Start Here


Contents - Frame Tags
 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

FRAME - Define a frame in a FRAMESET

FRAMESET - Define multiple-window frame layout

IFRAME - Define floating frame

ILAYER - Define a floating layer

LAYER - Define an overlapping layer

NOFRAMES - Text for non-frame browsers

NOLAYER - Text for non-layer browsers

  Introducing Frames

Object Tags

Script Tags

Style Tags

Articles

Reference

Support

Start Here


Contents - Object Tags
 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

A - Anchor tag or reference anchor

AREA - Define part of an image map

BGSOUND - Play a sound while the document loads

EMBED - Tag embedded object

IMG - Insert a picture

MAP - Define picture hot-spot

NOEMBED - Define non-plug-in document

OBJECT - Insert object on page

PARAM - Set object properties

SOUND - Play background sound (Mosaic)

Script Tags

Style Tags

Articles

Reference

Support

Start Here


Contents - Script Tags
 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

APPLET - Reference a Java Applet

NOSCRIPT - Text for non-script browsers

SCRIPT - Describe embedded script language

SERVER - Run a LiveWire JavaScript

TEXTFLOW - Define text for an Applet

Style Tags

Articles

Reference

Support

Start Here


Contents - Style Tags
 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

DIV - Document section division

LINK - Define link between documents

SPAN - Define document section style

STYLE - Define document formatting style

Styles: Box

Styles: Border

Styles: Visual

Styles: Page

Styles: Color & Background

Styles: Fonts & Text

Styles: List

Styles: Table

Styles: User Interface

Styles: Aural (Sound)

Articles & Reference

Articles

Reference

Support

Start Here


Contents - Style Tags
<<


Contents - Styles: Box
 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

DIV - Document section division

LINK - Define link between documents

SPAN - Define document section style

STYLE - Define document formatting style

Styles: Box

margin	padding

margin-bottom	padding-bottom

margin-left	padding-left

margin-right	padding-right

margin-top	padding-top

Styles: Border

Styles: Visual

Styles: Page

Styles: Color & Background

Styles: Fonts & Text

Styles: List

Styles: Table

Styles: User Interface

Styles: Aural (Sound)

Articles & Reference

Articles

Reference

Support

Start Here


Contents - Styles: Border
 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

DIV - Document section division

LINK - Define link between documents

SPAN - Define document section style

STYLE - Define document formatting style

Styles: Box

Styles: Border

border	border-right

border-bottom	border-right-color

border-bottom-color	border-right-style

border-bottom-style	border-right-width

border-bottom-width	border-style

border-color	border-top-color

border-left	border-top-style

border-left-color	border-top-width

border-left-style	border-width

border-left-width

Styles: Visual

Styles: Page

Styles: Color & Background

Styles: Fonts & Text

Styles: List

Styles: Table

Styles: User Interface

Styles: Aural (Sound)

Articles & Reference

Articles

Reference

Support

Start Here


Contents - Styles: Visual
 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

DIV - Document section division

LINK - Define link between documents

SPAN - Define document section style

STYLE - Define document formatting style

Styles: Box

Styles: Border

Styles: Visual

bottom	left

clear	line-height

clip	max-height

column-gap	max-width

column-rule	min-height

column-rule-color	min-width

column-rule-style	overflow

column-rule-width	position

columns	right

direction	top

display	vertical-align

float	visibility

height	width

Styles: Page

Styles: Color & Background

Styles: Fonts & Text

Styles: List

Styles: Table

Styles: User Interface

Styles: Aural (Sound)

Articles & Reference

Articles

Reference

Support

Start Here


Contents - Styles: Page
 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

DIV - Document section division

LINK - Define link between documents

SPAN - Define document section style

STYLE - Define document formatting style

Styles: Box

Styles: Border

Styles: Visual

Styles: Page

marks	running-head

orphans	size

page-break-after	widows

page-break-before

Styles: Color & Background

Styles: Fonts & Text

Styles: List

Styles: Table

Styles: User Interface

Styles: Aural (Sound)

Articles & Reference

Articles

Reference

Support

Start Here


Contents - Styles: Color & Background
 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

DIV - Document section division

LINK - Define link between documents

SPAN - Define document section style

STYLE - Define document formatting style

Styles: Box

Styles: Border

Styles: Visual

Styles: Page

Styles: Color & Background

background	background-position

background-attachment	background-repeat

background-color	color

background-image

Styles: Fonts & Text

Styles: List

Styles: Table

Styles: User Interface

Styles: Aural (Sound)

Articles & Reference

Articles

Reference

Support

Start Here


Contents - Styles: Fonts & Text
 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

DIV - Document section division

LINK - Define link between documents

SPAN - Define document section style

STYLE - Define document formatting style

Styles: Box

Styles: Border

Styles: Visual

Styles: Page

Styles: Color & Background

Styles: Fonts & Text

@font-face	mathline

alignment	panose-1

ascent	slope

baseline	src

cap-height	stemh

centerline	stemv

definition-src	text-decoration

descent	text-indent

font	text-shadow

font-family	text-transform

font-size	topline

font-size-adjust	unicode-range

font-stretch	white-space

font-style	widths

font-variant	word-spacing

font-weight	x-height

letter-spacing

Styles: List

Styles: Table

Styles: User Interface

Styles: Aural (Sound)

Articles & Reference

Articles

Reference

Support

Start Here


Contents - Styles: List
 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

DIV - Document section division

LINK - Define link between documents

SPAN - Define document section style

STYLE - Define document formatting style

Styles: Box

Styles: Border

Styles: Visual

Styles: Page

Styles: Color & Background

Styles: Fonts & Text

Styles: List

list-style	list-style-position

list-style-image	list-style-type

Styles: Table

Styles: User Interface

Styles: Aural (Sound)

Articles & Reference

Articles

Reference

Support

Start Here


Contents - Style: Table
 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

DIV - Document section division

LINK - Define link between documents

SPAN - Define document section style

STYLE - Define document formatting style

Styles: Box

Styles: Border

Styles: Visual

Styles: Page

Styles: Color & Background

Styles: Fonts & Text

Styles: List

Styles: Table

border-collapse	empty-cells

border-spacing	row-span

caption-side	table-layout

column-span

Styles: User Interface

Styles: Aural (Sound)

Articles & Reference

Articles

Reference

Support

Start Here


Contents - Styles: User Interface
 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

DIV - Document section division

LINK - Define link between documents

SPAN - Define document section style

STYLE - Define document formatting style

Styles: Box

Styles: Border

Styles: Visual

Styles: Page

Styles: Color & Background

Styles: Fonts & Text

Styles: List

Styles: Table

Styles: User Interface

cursor

Styles: Aural (Sound)

Articles & Reference

Articles

Reference

Support

Start Here


Contents - Styles: Aural (Sound)
 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

DIV - Document section division

LINK - Define link between documents

SPAN - Define document section style

STYLE - Define document formatting style

Styles: Box

Styles: Border

Styles: Visual

Styles: Page

Styles: Color & Background

Styles: Fonts & Text

Styles: List

Styles: Table

Styles: User Interface

Styles: Aural (Sound)

azimuth	play-during

cue	richness

cue-after	speak

cue-before	speak-numeral

elevation	speak-punctuation

pause	speech-rate

pause-after	stress

pause-before	voice-family

pitch	volume

pitch-range

Articles & Reference

Articles

Reference

Support

Start Here


Contents - Style: Articles & Reference
 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

DIV - Document section division

LINK - Define link between documents

SPAN - Define document section style

STYLE - Define document formatting style

Styles: Box

Styles: Border

Styles: Visual

Styles: Page

Styles: Color & Background

Styles: Fonts & Text

Styles: List

Styles: Table

Styles: User Interface

Styles: Aural (Sound)

Articles & Reference

Introducing Styles

Style Syntax

Style Values

Style Compatibility

Articles

Reference

Support

Start Here


Contents - Style Tags
<<


Contents - Articles
 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

Articles

  Start Here

  Introduction

  The HTML Document

  Portability

  How Do I

  Essential HTML Tags

  Proprietary Tags

  Introducing Color

  Color Experiments

  Introducing Pictures

  Optimizing Pictures

  Introducing Tables

  Introducing Fonts

  Introducing Forms

  Introducing Frames

  Introducing Styles

Reference

Support

Start Here


Contents - Reference
 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

Articles

Reference

  Color Names

  Color Swatches

  Font Samples

  Special Characters

  Icon Symbols

  Character Conversion Table

  Font Compatibility

  Style Selectors

  Style Values

  Style Compatibility

  Style Tags

  HTML Compatibility

  HTML Attributes

  !DOCTYPE Declarations

  Boilerplate Document

  Glossary

Support

Start Here


Contents - Support
 Contents

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

Articles

Reference

Support

  Welcome to HTMLcat

  Help Tips

  Navigation Tips

  Glossary

  Copyright Notice

  Setup

Start Here


Tags
!-- - Tag a hidden comment

!DOCTYPE - Describe HTML compliance

 ·  !DOCTYPE Declarations

A - Anchor tag or reference anchor HRef: Name:

ABBREV -

ACRONYM - Display an acronym

ADDRESS - Define mailing address

APPLET - Reference a Java Applet

AREA - Define part of an image map

AU -

B - Display bold text

BANNER - Banner

BASE - Identify document's URL address

BASEFONT - Define default font

BDO - Override bi-directional text

BGSOUND - Play a sound while document loads

BIG - Display larger text

BLINK - Display text blinking

BLOCKQUOTE - Indent left/right margins

BODY - Define look of document

BQ -

BR - Start a new line of text

BUTTON - Define a button

CAPTION - Define table caption

CENTER - Display text centered

CITE - Format citation reference

CODE - Format text as source code example

COL - Define table column

COLGROUP - Table column properties

COMMENT - Tag a hidden comment

CREDIT -

DD - Definition list description

DEL - Mark text deletions

DFN - Format text as a definition

DIR - Start a directory list

DIV - Document section division

DL - Start a definition list

!DOCTYPE - Describe HTML compliance

 ·  !DOCTYPE Declarations

DT - Definition list term

EM - Emphasize text (italic)

EMBED - Tag embedded object

FIELDSET - Define a group of controls

FN -

FONT - Define font properties Arial: Roman:

FORM - Define a form

FRAME - Define a frame in a FRAMESET

FRAMESET - Define multiple-window layout

H1, H2... - Tag section headline H1: H2:

HEAD - HTML document head

HR - Draw horizontal line

HTML - Tag beginning of HTML document

I - Display italic text

IFRAME - Define a floating frame

ILAYER - Define a floating layer

IMG - Insert a picture

INPUT - Define input box

INS - Mark text insertion

ISINDEX - Tag an index for search engines

KBD - Display text fixed-pitch, bold

KEYGEN - Public key encryption

LABEL - Define control label

LAYER - Define an overlapping layer

LEGEND - Assign caption to FIELDSET

LH -

LI - Tag list item

LINK - Define link between documents

LISTING - Display fixed-pitch text

MAP - Define picture hot-spot

MARQUEE - Scrolling ticker-tape

MENU - Define menu-style list

META - Define document information

MULTICOL - Define multiple-column document

NEXTID - Define next link name ID

NOBR - Display text without word-wrap

NOEMBED - Define non-plug-in document

NOFRAMES - Text for non-frame browsers

NOLAYER - Text for non-layer browsers

NOSCRIPT - Text for non-script browsers

NOTE -

OBJECT - Insert object on page:

OL - Define ordered list 123: ABC:

OPTGROUP - Group options in a form

OPTION - Define list box choice

OVERLAY -

P - Start paragraph

PARAM - Set object properties

PERSON -

PLAINTEXT - Display fixed pitch text

PRE - Display fixed-pitch text

Q - Format text as a quotation

REDIRECT -

S - Display strike-out text

SAMP - Display small, fixed-pitch text

SCRIPT - Describe embedded script language

SELECT - Define drop-down or list box

SERVER - Run a LiveWire JavaScript

SMALL - Display small text

SNML_FOLIO -

SOUND - Play background sound (Mosaic)

SPACER - Add extra blank space (Netscape)

SPAN - Define document section style

STRIKE - Display strike-out text

STRONG - Display heavy, emphasized text

STYLE - Define document formatting style

SUB - Display subscript text

SUP - Display superscript text

TAB - Define tab-aligned data

TABLE - Define a table

TBODY - Define table body

TD - Define table cell

TEXTAREA - Define multiple-line data entry box

TEXTFLOW Define text for an Applet

TFOOT - Define table footer

TH - Define table heading

THEAD - Define table header

TITLE - Set document window title

TR - Format table row

TT - Display fixed-pitch teletype text

U - Display underlined text

UL - Define bulleted list

VAR - Display small italic text

WBR - Allow optional word break

XMP - Display fixed-pitch text

Click an icon to copy to the Clipboard.


Tags
 Start Here

  ·  Introduction

  ·  The HTML Document

  ·  Portability

  ·  How Do I

 Essential HTML Tags

  ·  Character Tags

  ·  Paragraph Tags

  ·  Document Tags

  ·  List Tags

  ·  Table Tags

  ·  Proprietary Tags

 Introducing Color

  ·  Applying Color

  ·  Color Names

  ·  Color Swatches

  ·  Color Experiments

 Introducing Pictures

  ·  Optimizing Pictures

 Introducing Tables

  ·  Table Layout

  ·  Table Review

 Introducing Fonts

  ·  Font Samples

  ·  Special Characters

  ·  Character Conversion Table

  ·  Icon Symbols

  ·  Font Compatibility

 Introducing Forms

 Introducing Frames

 Introducing Styles

  ·  Style Syntax

  ·  Style Selectors

  ·  Style Values

  ·  Style Compatibility

 HTML Compatibility

  ·  HTML Attributes

  ·  Boilerplate Document

 Welcome to HTMLcat

  ·  Help Tips

  ·  Navigation Tips

  ·  Glossary

  ·  Copyright Notice

  ·  Setup


Tags
 Styles Box

  ·  margin

  ·  margin-bottom

  ·  margin-left

  ·  margin-right

  ·  margin-top

  ·  padding

  ·  padding-bottom

  ·  padding-left

  ·  padding-right

  ·  padding-top

 Styles: Border

  ·  border

  ·  border-bottom

  ·  border-bottom-color

  ·  border-bottom-style

  ·  border-bottom-width

  ·  border-color

  ·  border-left

  ·  border-left-color

  ·  border-left-style

  ·  border-left-width

  ·  border-right

  ·  border-right-color

  ·  border-right-style

  ·  border-right-width

  ·  border-style

  ·  border-top-color

  ·  border-top-style

  ·  border-top-width

  ·  border-width

 Styles: Visual

  ·  bottom

  ·  clear

  ·  clip

  ·  column-gap

  ·  column-rule

  ·  column-rule-color

  ·  column-rule-style

  ·  column-rule-width

  ·  columns

  ·  direction

  ·  display

  ·  float

  ·  height

  ·  left

  ·  line-height

  ·  max-height

  ·  max-width

  ·  min-height

  ·  min-width

  ·  overflow

  ·  position

  ·  right

  ·  top

  ·  vertical-align

  ·  visibility

  ·  width

 Styles: Page

  ·  marks

  ·  orphans

  ·  page-break-after

  ·  page-break-before

  ·  running-head

  ·  size

  ·  widows

 Styles: Color and Background

  ·  background

  ·  background-attachment

  ·  background-color

  ·  background-image

  ·  background-position

  ·  background-repeat

  ·  color

 Styles: Fonts & Text

  ·  @font-face

  ·  alignment

  ·  ascent

  ·  baseline

  ·  cap-height

  ·  centerline

  ·  definition-src

  ·  descent

  ·  font

  ·  font-family

  ·  font-size

  ·  font-size-adjust

  ·  font-stretch

  ·  font-style

  ·  font-variant

  ·  font-weight

  ·  letter-spacing

  ·  mathline

  ·  panose-1

  ·  slope

  ·  src

  ·  stemh

  ·  stemv

  ·  text-decoration

  ·  text-indent

  ·  text-shadow

  ·  text-transform

  ·  topline

  ·  unicode-range

  ·  white-space

  ·  widths

  ·  word-spacing

  ·  x-height

 Styles: List

  ·  list-style

  ·  list-style-image

  ·  list-style-position

  ·  list-style-type

 Styles: Table

  ·  border-collapse

  ·  border-spacing

  ·  caption-side

  ·  column-span

  ·  empty-cells

  ·  row-span

  ·  table-layout

 Styles: User Interface

  ·  cursor

 Styles: Aural (Sound)

  ·  azimuth

  ·  cue

  ·  cue-after

  ·  cue-before

  ·  elevation

  ·  pause

  ·  pause-after

  ·  pause-before

  ·  pitch

  ·  pitch-range

  ·  play-during

  ·  richness

  ·  speak

  ·  speak-numeral

  ·  speak-punctuation

  ·  speech-rate

  ·  stress

  ·  voice-family

  ·  volume

 Introducing Styles

  ·  Style Syntax

  ·  Style Values

  ·  Style Compatibility


Tags
note
• This is just a short sample of the colors available.

• The complete color list is included when you register.

Click to copy a color code to the Clipboard.


Tags
  	160	 Non-breaking space &nbsp;

"	34	 Quotation mark &quot;

&	38	 Ampersand &amp;

<	60	 Less than &lt;

>	62	 Greater than &gt;

^	94	 Caret; Accent Circumflex

`	96	 Accent grave

€	8364	 euro currency symbol

…	133	 Ellipsis &hellip;

†	134	 Dagger &dagger;

‡	135	 Double dagger &Dagger;

‰	137	 Permille &permil;

‘	145	 Opening single quote &lsquo;

’	146	 Closing single quote &rsquo;

“	147	 Opening double quote &ldquo;

”	148	 Closing double quote &rdquo;

•	149	 Bullet &bull;

–	150	 En-dash &ndash;

—	151	 Em-dash &mdash;

™	153	 Trademark &trade;

¡	161	 Inverted exclamation mark &iexcl;

¢	162	 Cent symbol &cent;

£	163	 Pound Sterling &pound;

¤	164	 International Currency (currency sign) &curren;

¥	165	 Japanese Yen (yen sign) &yen;

¦	166	 Split | (broken vertical bar) &brvbar;

§	167	 Section sign &sect;

¨	168	 Umlaut (dieresis) &die;

©	169	 Copyright &copy;

ª	170	 Feminine ordinal indicator &ordf;

«	171	 Left Guillemet (chevron, left angle quote) &laquo;

¬	172	 Not sign &not;

­	173	 Soft hyphen &shy;

®	174	 Registered trademark &reg;

¯	175	 Macron (over-score, vinculum) &macr;

°	176	 Degree sign &deg;

±	177	 Plus-Minus sign &plusmn;

º	186	 Masculine ordinal &ordm;

»	187	 Right Guillemet (chevron, right angle quote) &raquo;

¶	182	 Paragraph &para;

¸	184	 Cedilla &cedil;

¿	191	 Inverted question mark &iquest;

×	215	 Multiplication sign &times;

÷	247	 Division sign &divide;

Á	193	 Latin capital A, circumflex &Aacute;

á	225	 Small a, acute accent &aacute;

Â	194	 Capital A, circumflex &Acirc;

â	226	 Small a, circumflex &acirc;

À	192	 Capital A, grave accent &Agrave;

à	224	 Small a, grave accent &agrave;

Å	197	 Capital A, ring &Aring;

å	229	 Small a, ring &aring;

Ã	195	 Capital A, tilde &Atilde;

ã	227	 Small a, tilde &atilde;

Ä	196	 Capital A, dieresis/umlaut &Auml;

ä	228	 Small a, dieresis/umlaut &auml;

Æ	198	 Capital AE ligature &AElig;

æ	230	 Small ae ligature &aelig;

Ç	199	 Capital C, cedilla &Ccedil;

ç	231	 Small c, cedilla &ccedil;

Ð	208	 Capital Eth, Icelandic &ETH;

ð	240	 Small eth, Icelandic &eth;

É	201	 Capital E, acute accent &Eacute;

é	233	 Small e, acute accent &eacute;

Ê	202	 Capital E, circumflex &Ecirc;

ê	234	 Small e, circumflex &ecirc;

È	200	 Capital E, grave accent &Egrave;

è	232	 Small e, grave accent &egrave;

Ë	203	 Capital E, dieresis/umlaut &Euml;

ë	235	 Small e, dieresis/umlaut &euml;

Í	205	 Capital I, acute accent &Iacute;

í	237	 Small I, acute accent &iacute;

Î	206	 Capital I, circumflex &Icirc;

î	238	 Small I, circumflex &icirc;

Ì	204	 Capital I, grave accent &Igrave;

ì	236	 Small I, grave accent &igrave;

Ï	207	 Capital I, dieresis/umlaut &Iuml;

ï	239	 Small I, dieresis/umlaut &iuml;

Ñ	209	 Capital N, tilde &Ntilde;

ñ	241	 Small n, tilde &ntilde;

Ó	211	 Capital O, acute accent &Oacute;

ó	243	 Small o, acute accent &oacute;

Ô	212	 Capital O, circumflex &Ocirc;

ô	244	 Small o, circumflex &ocirc;

Ò	210	 Capital O, grave accent &Ograve;

ò	242	 Small o, grave accent &ograve;

Ø	216	 Capital O, slash &Oslash;

ø	248	 Small o, slash &oslash;

Õ	213	 Capital O, tilde &Otilde;

õ	245	 Small o, tilde &otilde;

Ö	214	 Capital O, dieresis /umlaut &Ouml;

ö	246	 Small o, dieresis/umlaut &ouml;

ß	223	 Small sharp s, German sz &szlig;

Þ	222	 Capital Thorn, Icelandic &THORN;

þ	254	 Small thorn, Icelandic &thorn;

Ú	218	 Capital U, acute accent &Uacute;

ú	250	 Small u, acute accent &uacute;

Û	219	 Capital U, circumflex &Ucirc;

û	251	 Small u, circumflex &ucirc;

Ù	217	 Capital U, grave accent &Ugrave;

ù	249	 Small u, grave accent &ugrave;

Ü	220	 Capital U, dieresis/umlaut &Uuml;

ü	252	 Small u, dieresis/umlaut &uuml;

Ý	221	 Capital Y, acute accent &Yacute;

ý	253	 Small y, acute accent &yacute;

Ÿ	159	 Capital Y, dieresis/umlaut &#159;

ÿ	255	 Small y, dieresis/umlaut &yuml;

Click an icon to copy to the Clipboard.


!--

!DOCTYPE


A

ABBREV

ACRONYM

ADDRESS

APPLET

AREA

AU


B

BANNER

BASE

BASEFONT

BDO

BGSOUND

BIG

BLINK

BLOCKQUOTE

BODY

BQ

BR

BUTTON


CAPTION

CENTER

CITE

CODE

COL

COLGROUP

COMMENT

CREDIT


DD

DEL

DFN

DIR

DIV

DL

!DOCTYPE

DT


EM

EMBED


FIELDSET

FN

FONT

FORM

FRAME

FRAMESET


H1, H2...

HEAD

HR

HTML


I

IFRAME

ILAYER

IMG

INPUT

INS

ISINDEX


KBD

KEYGEN


LABEL

LAYER

LEGEND

LH

LI

LINK

LISTING


MAP

MARQUEE

MENU

META

MULTICOL


NEXTID

NOBR

NOEMBED

NOFRAMES

NOLAYER

NOSCRIPT

NOTE


OBJECT

OL

OPTGROUP

OPTION

OVERLAY


P

PARAM

PERSON

PLAINTEXT

PRE


Q

REDIRECT


S

SAMP

SCRIPT

SELECT

SERVER

SMALL

SNML_FOLIO

SOUND

SPACER

SPAN

STRIKE

STRONG

STYLE

SUB

SUP


TAB

TABLE

TBODY

TD

TEXTAREA

TEXTFLOW

TFOOT

TH

THEAD

TITLE

TR

TT


U

UL


VAR


WBR


XMP


 All tags

Character Tags

Paragraph Tags

Document Tags

Picture Tags

Color Tags

List Tags

Table Tags

Form Tags

Frame Tags

Object Tags

Script Tags

Style Tags

Articles


 Character tags

!--	MARQUEE

ACRONYM	NOBR

B	Q

BASEFONT	S

BDO	SAMP

BIG	SMALL

BLINK	SPAN

CITE	STRIKE

COMMENT	STRONG

CODE	SUB

DFN	SUP

EM	TT

FONT	U

I	VAR

KBD	XMP

Introducing Fonts	Icon Symbols

Special Characters	Font Compatibility


 Paragraph tags

!--	LISTING

ADDRESS	MARQUEE

BDO	MULTICOL

BLOCKQUOTE	NOBR

BR	P

CENTER	PLAINTEXT

COMMENT	PRE

DEL	SPACER

DIV	SPAN

H1, H2...	WBR

HR	XMP

INS


 Document tags

!DOCTYPE	HTML

A	INS

BASE	ISINDEX

BASEFONT	LINK

BGSOUND	META

BODY	NEXTID

DEL	SERVER

EMBED	SOUND

HEAD	TITLE


 Picture tags

A	LABEL

AREA	MAP

BGSOUND	OBJECT

EMBED	SERVER

IMG	SOUND

Introducing Pictures	Optimizing Pictures

Download Times


 Color tags

BASEFONT	TABLE

BODY	TD

FONT	TH

HR	TR

MARQUEE

Introducing Color	Color Experiments

Color Names	Hex Table

Color Swatches


 List tags

DIR	MENU

DL	OL

DT	UL

LI


 Table tags

CAPTION	TFOOT

COL	TD

COLGROUP	TH

TAB	THEAD

TABLE	TR

TBODY	Introducing Tables


 Form tags

BUTTON	LEGEND

FIELDSET	OPTGROUP

FORM	OPTION

INPUT	SELECT

KEYGEN	TEXTAREA

LABEL	Introducing Forms


 Frame tags

FRAME	LAYER

FRAMESET	NOFRAMES

IFRAME	NOLAYER

ILAYER	Introducing Frames


 Object tags

A	NOEMBED

AREA	OBJECT

BGSOUND	PARAM

EMBED	SERVER

IMG	SOUND

MAP	Download Time


 Script tags

APPLET	SERVER

NOSCRIPT	TEXTFLOW

SCRIPT


 Style tags

DIV	SPAN

LINK	STYLE

Introducing Styles	Style Values

Style Syntax	Style Compatibility

Style Selectors	Style Tags


 Articles

Start Here	Introducing Pictures

Introduction	Introducing Tables

The HTML Document	Special Characters

Portability	Icon Symbols

Proprietary Tags	Introducing Fonts

How Do I	Font Samples

Essential HTML Tags	Introducing Forms

Introducing Color	Introducing Frames

Color Names	Introducing Styles

Boilerplate Document	Download Time

Hex Table	About HTMLcat


 Uncommon tag

This tag is not often supported.


@font-face

alignment

ascent

azimuth


background	border-left-color

background-attachment	border-left-style

background-color	border-left-width

background-image	border-right

background-position	border-right-color

background-repeat	border-right-style

baseline	border-right-width

border	border-style

border-bottom	border-top-color

border-bottom-color	border-top-style

border-bottom-style	border-top-width

border-bottom-width	border-width

border-color	bottom

border-left


cap-height	column-rule-style

centerline	column-rule-width

clear	column-span

clip	columns

color	cue

column-gap	cue-after

column-rule	cue-before

column-rule-color	cursor


definition-src

descent

direction

display


elevation


float	font-size-adjust

font	font-stretch

@font-face	font-style

font-family	font-variant

font-size	font-weight


height


left

letter-spacing

line-height

list-style

list-style-image

list-style-position

list-style-type


margin	mathline

margin-bottom	max-height

margin-left	max-width

margin-right	min-height

margin-top	min-width

marks


orphans

overflow


padding	pause

padding-bottom	pause-after

padding-left	pause-before

padding-right	pitch

padding-top	pitch-range

page-break-after	play-during

page-break-before	position

panose-1


richness

right

row-span

running-head


size	speech-rate

slope	src

speak	stemh

speak-numeral	stemv

speak-punctuation	stress


text-decoration

text-indent

text-shadow

text-transform

top

topline


unicode-range


vertical-align

visibility

voice-family

volume


white-space

widows

width

widths

word-spacing


x-height


HTML Compatibility

2.0	HTML 2.0 standard
3.0	HTML 3.0 proposal
3.2	HTML 3.2 standard
4.0	HTML 4.0 recommendation
IE	Internet Explorer only
IE3	Introduced in Internet Explorer 3
IE4	Internet Explorer 4, MSHTML
Mosaic	Mosaic 3 only
NS	Netscape only
NS2	Introduced in Netscape 2
NS4	Introduced in Netscape 4


14-day evaluation edition

  HTMLcat

• The online HTML catalog

——————————————————

You may use this book for up to 14 days for evaluation.
If you continue to use this tool, you must register and
pay for it. See How to register!

R. E. Harvey
P. O. Box 5695
Glendale, AZ  85312  USA

Internet: http://ourworld.compuserve.com/homepages/r_harvey

E-mail: r_harvey@compuserve.com

Edition 4.01, December 5, 1998, HTMLCAT.DLL

Supports W3C Recommendation 18-Dec-1997

Supports Cascading Style Sheets level 2, 12-May-1998

Copyright © 1998 Richard E. Harvey, All rights reserved.


Please register!
 How to register

Thank you for evaluating HTMLcat, the online HTML catalog.

This is the evaluation edition of this book. Your evaluation period begins the first time you open this book. We think you will know in a few minutes if HTMLcat is right for you. You may use this tool for up to 14 days for evaluation purposes—try it before you buy it. After a few days, if you have received fair value from this book or you are still using it, you might as well register and get the benefits of the complete book. If it's worth your time to download and it's worth your time to use, then it's certainly worth purchasing.

HTMLcat for AceExpert
Your AceExpert registration includes the complete HTMLcat package at no additional cost. You will receive the latest book, with every feature for the price of AceExpert, you do not have to register HTMLcat separately. If you decide not to keep AceExpert after your evaluation period has expired, you can still purchase HTMLcat separately.

Registration is required to use this book after the evaluation period. See Benefits and About Online Books, both on this page, for more information.

If you want the best, latest, most accurate content you can get, it must be worth at least few dollars to you. And, really, the difference between a few dollars and free is not very much. Supporting the tools you use is the only way to ensure that these tools remain available.

Registration

OK, it's a pain to write a check and stick it in the mail and wait. It's less of a pain than having to go back to inconvenient, klunky, old-fashioned paper books.

A single-user license delivered electronically is just $12 (US funds). Yes, just $12. Provide the following information:

Your name.

Your E-mail address. You must include your E-mail address so that we can send you electronic mail pointing you to the complete, registered edition.

Your mailing address. Required only if you would like your order shipped on disk.

Registration fee, $12 (US) per user; personal check, money order, or cash. If you would like your copy shipped on 3.5-inch disk and a written receipt, the shipping price is $17; outside the US, $19 on disk. Only one floppy disk is required, but you must pay $12 per user.

Use the convenient Order Form, or simply write your name and E-mail address on a piece of paper with the product name (HTMLcat), plus the registration fee, and mail it here:

Send your registration:

R. E. Harvey
P. O. Box 5695
Glendale, AZ  85312  USA
E-mail: r_harvey@compuserve.com

If you send cash, cover the bills with paper.

As soon as you register, we will quickly send you e-mail information telling you how to receive the complete book. Be sure to include your complete name, mailing address (if applicable) and your E-mail address. You must include your E-mail address so that we can send you electronic mail pointing you to the complete, registered edition.

You will not be placed on mailing lists or barraged with unsolicited E-mail.

Benefits When You Register

No more annoying registration reminders.

No "Register!" button at the top of the window.

Support for separate, complete, Contents window for 32-bit operating systems.

Latest, complete edition. There's a mountain of information in this evaluation edition, but the registered book contains even more—and updated information, because it is the latest release.

Sophisticated sample HTML documents. License to use the included example documents.

Additional help for 32-bit Windows users! When you register, you will receive the exclusive COLORcat help file, with swatches and color samples viewed several ways.

The >> button won't stop here any more, because this topic will not be here!

More innovations per page. Sophisticated, attractive, intuitive, flexible, easy to use—and fun!

It's a bargain!

If you use this book, you must register and pay for it. If you do not pay for this tool, you cannot legally or ethically use it. If you do not agree with this, please delete this book from your computer.

About Online Books

Why would you want to pay for a help file, especially when it's only a few dollars?

By the time a book is printed, marketed, distributed and sold, there's little left for the author. And once the publisher has printed a garage-full of books, there's no way they'll update it when errors are found or additions are needed.

If they do short runs to make it easier to update and to minimize up-front costs, the books are never in stock, and they'll be back ordered for months, or forever. With specialized books, nobody wins: the publisher is reluctant to commit, the writer is lucky to get a quarter an hour, and the reader is hard-pressed to find current, accurate information in print.

Writers cannot afford the time to do the job they would like. And, on the other side, publishers must widen the margins and pad the illustrations in order to make it look like it's worth $40. It's no wonder most books are oversized and under-written.

Nobody truly wins, except the print shop. Paperless means the reader gets it faster, more complete, and cheaper--without the up-front investment in trees and ink.

Visit the home page for more books and tools:

http://ourworld.compuserve.com/homepages/r_harvey

Write or E-mail (r_harvey@compuserve.com) for information about site licensing, bundling, consultation, and custom development services.

  Articles

  License Agreement


 HTMLcat features

HTMLcat is a help application for designers and writers, not just for computer programmers. It helps professionals create attractive, useful, intelligible documents. Get the most from your tools without having to memorize every detail just to write a clear document.

Catalog with several ways to browse. Simple, logical, sequential design. Move from topic to topic without jumping back to the table of contents each time.

Designed from the start as a hypertext document, a true help application—not a printed book turned into a help file.

Topics are arranged consistently, beginning with simple descriptions and increasing levels of detail.

Click on icons to see pop-up lists of related topics.

Just as many words as necessary—no more, no fewer. We're offering ideas, not words.

Lots of tips, examples, formatting suggestions, and compatibility notes.

Faster and easier to use one Windows help file to look-up HTML information than to search giant, poorly-organized HTML files or outdated ink-on-paper reference books.

Topic links, cross-references, and more links—more than 7,000 links—guide you between topics.

Copy examples to the Windows Clipboard with a single mouse click. Look for the copy button or the small copy icon.

Color Swatches with large samples of all HTML colors. These high-resolution, high-quality, vector drawings take very little space in this book. Click a swatch to copy the color value to the Windows Clipboard or change the window color.

Pop-up Boilerplate HTML, Special characters, and Web sites lists, in the Edit menu. Instant access to Internet sites and sample documents discussed in this book, plus data you can use in your documents. Click the Copy button to copy information to the Clipboard.

Fair, unbiased explanations of HTML document tags. We tell you what works, and what doesn't.

Compatibility information as well as standards—regardless of standards, every browser will display your pages differently.

Some high-level HTML editors (most, it seems likely) insert tags that are supported by only a few browsers, perhaps (often, it seems even more likely) only those distributed by the same company. We show you which tags to avoid—and even some proprietary tags you really should use.

More than 3,500 graphics, bullets, icons, lines and illustrations. Efficient illustrations eliminate waste. Every picture is hand-optimized—many are vector drawings.

High-resolution graphics for computers that display large fonts or high resolution. Eliminates the jaggies that too often fill the screen with unreadable examples.

Efficient, 100-percent Assembly language DLL improves performance, adds unique functionality, and actually reduces the size of the book.

No multiple windows popping-up all over the place on top of each other, that when you accidentally close one, the whole help system closes and you have to start over. (Not that I have anything against multiple-window help files.)

Pop-up Tags window provides easy, quick navigation without taking-over the screen. Click the Tags button to open or switch to this well-designed window.

Pop-up, context-sensitive link lists on every page guide you through related topics.

Modern, hierarchical table of contents; just click the Contents button. Optional separate contents window for Windows Help version 4 and later.

Exclusive 32-bit COLORcat color swatch help file. Works with HTMLcat, offering pop-up color samples, multiple color lists, and boilerplate HTML lists.

You may be able to find an old-fashioned paper book with most HTML commands, but it'll be older, much more expensive, and you'll never be able to search it as quickly and easily as a book designed as a help file. And when the printed book quickly becomes outdated (if it wasn't already outdated when you bought it), you'll have to go down to the store to buy another book.

It's a CD-ROM worth of reference without the CD. This book is the result of thousands of hours of work. Supporting the tools you use makes it possible for developers to create even more useful tools.

Online Book Efficiency

A bigger help file is not a better help file—or even better looking or more useful. The larger document may be padded with useless information, redundant writing, or inefficient graphics.

Many large help files have several times as much space used by inefficient, poorly designed graphics than text. Our efficient design means much more space used for text than graphics. We design graphics specifically for efficient compression.

  Articles

  License Agreement


Order Form
HTMLcat Order Form

A single-user license delivered electronically is currently just $12 (US funds).

Please Print this form, fill it out, and mail it today!

-------------------------------------------------------

Your Name: ______________________________ (required)

E-mail:    ______________________________ (required)

Company:   ______________________________

Street:    ______________________________

City/State:______________________________  Zip:__________

-------------------------------------------------------

#Users:____ x $12.00 = ________.00 (US funds)

Disk: [  ]    _________________.00 ($5 each US, $7 foreign)

Total $:      _________________.00

-------------------------------------------------------

Send payment to:

  R. E. Harvey
  P. O. Box 5695
  Glendale, AZ  85312  USA
  E-mail: r_harvey@compuserve.com

Personal checks, money orders, or cash are accepted. Prices and availability are subject to change.

As soon as you register, we will quickly send you e-mail information telling you how to receive the complete edition of this book. Be sure to include your complete name, mailing address (if applicable) and your E-mail address. You must include your E-mail address.

If you would like your copy shipped on 3.5-inch disk and a written receipt, the shipping price is $17; outside the US, $19 on disk. Only one floppy disk is required, but you must pay $12 per user. Site licenses and bundling agreements are available.


Quick Tips

•	Underlined words jump to topics. Click dotted words to see pop-up tips.

•	Most pictures have hot-spots you can click.

•	Press the < or > key to move between pages.

•	Press SPACEBAR to move forward.

•	Click the Contents button to return to the main contents page.

•	Click [image] on page corners for context-sensitive references. Press SHIFT while you click, for Style references. Many buttons change with the SHIFT key.

•	 buttons and icons copy examples to the Clipboard.

•	The Tags button opens the separate Tags window.

•	Press ESC to quit.

•	See Help Tips.


!-- (comment) tag
 !--, --

Tag a hidden comment; 2.0

Comments are instructions, notes, and unfinished bits of text that aid the HTML author. Comments are ignored by browsers, and are never displayed.

We mark comments by beginning them with <!--, and closing them with -->. Anything between those tags is invisible on the displayed page. Comments may extend over several lines.

Example

<P>There are literally many <!-- a value I will have to look up before publishing this --> types of cheese available on the market today.</P>

There are literally many types of cheese available on the market today.

Notes

Browsers ignore any command that they do not recognize. Some implementations use this behavior to add comment-like tags. See, for instance, !DOCTYPE and COMMENT tags.

The opening tag must be formatted exactly as <!--, but the closing tag allows spaces between the closing -- and > characters. This feature is supported by most browsers, but for clarity and consistency, it's best to close comments with -->.

Comments are transferred over the Web just like any other text; they use bandwidth without benefit. Comments are stored on the reader's computer, which means anyone who sees your page will be able to look at your stuff; avoid commenting-out sensitive or version-specific information—just delete it. We often create master documents with lots of comments, then delete the comments from the copy of the document that we release.

When enclosed within pairs of SCRIPT and /SCRIPT tags, comment tags are interpreted as embedded scripts, not as comments. This, admittedly clumsy, convention ensures that browsers that do not support scripting languages will not accidentally display the source code for embedded scripts that they do not recognize.

Compatibility

The !-- comment is supported by virtually every browser. Avoid using the COMMENT tag for comments.

Some browsers treat the next > character as marking the end of the comment. This makes it difficult to comment-out sections of text that may contain other tags.

MSHTML treats any block of text beginning with <!, and ending with > as a comment. This causes confusion because some tags, such as !DOCTYPE, really do begin with an exclamation mark.

  Related Topics

  Style Topics


!DOCTYPE tag
 !DOCTYPE

Describe HTML version compliance; 3.2

The !DOCTYPE tag, placed at the very top of the document before the HTML tag, contains text that describes the document type and level of HTML it uses.

Example

HTML 4.0 compliant

<!DOCTYPE HTML Public "-//W3C//DTD HTML 4.0//EN">

HTML 3.2 compliant

<!DOCTYPE HTML Public "-//W3C//DTD HTML 3.2//EN">

HTML 2 compliant

<!DOCTYPE HTML Public "-//IETF//DTD HTML//EN">

Attributes

HTML	Describes the document as HTML.

Public	A public document.

Notes

The !DOCTYPE description is each author's promise that the document contains only HTML tags supported by the specified HTML version. It's bad form to, for example, use TABLE in a version 2.0-compatible document. See the HTML Compatibility section and the version information at the top of each topic in this book.

The !DOCTYPE codes represent a cryptic series of identifiers. Rather than learning these codes and trying to update them, we often copy them from a known, reliable source.

Acronyms, such as EN, DTD, IETF, and W3C, help describe the document. See !DOCTYPE Declarations for a listing of !DOCTYPE attributes and examples.

Compatibility

!DOCTYPE is ignored by many browsers. Required by HTML 3.2 specification.

Syntax for the description text is critical; some programs recognize only a few variations, and position within the string is important.

  Related Topics

  Style Topics


Prologue Identifiers
 !DOCTYPE Declarations

HTML 4.0 Final specification:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Final//EN">

HTML 4.0 Strict specification:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

HTML 4.0 Draft specification:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Draft//EN">

HTML 4.0 Validation against DTD on W3C Web site:

<!DOCTYPE HTML SYSTEM "http://www.w3.org/MarkUp/Cougar/relaxed.dtd">

HTML 4.0 Validation against strict DTD on W3C Web site:

<!DOCTYPE HTML SYSTEM "http://www.w3.org/MarkUp/Cougar/strict.dtd">

HTML 3.2:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

HTML 2.0:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

HTML 2.0, Strict:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0 Strict//EN">

HTML 2.0, Level 1:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML Level 1//EN">

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0 Level 1//EN">

  Related Topics

  Style Topics


A tag
 A, /A

Anchor tag or reference an anchor; 2.0

Anchors, commonly called links, mark hyper-link references. The A tag is the backbone of a hypertext document; it gives the user a way to jump to the referenced text. The A tag also defines these references. Link may reference the same document or another HTML document.

Every A anchor is either a reference to a hyper-link (using the HRef attribute), or the origin of the hyper-link (using Name).

Attributes

HRef = reference	Specify the destination link. Within a file, the reference string begins with the pound sign (#). References to other files or other Internet addresses contain the complete file name. Use either HRef or Name, never both.

HRefLang = "language"	When used with a link to a document in another language, specify the two-character language name abbreviation.

Name = name	Define a reference anchor within a document. The name is equivalent to a label in a programming language. We refer to this name in other links with the HRef attribute.

Target = window	Used with multiple-window documents created with FRAME. Optional. Declare a window by name that was defined by FRAME. The window name is case-sensitive. You can also use pre-defined names to simplify using frames: _blank, _parent, _self, or _top.

Title = window	Window title that is displayed when the link is selected. Optional.

Example

Define a link:

<A Name = Link><P>Text that the name Link describes follows the tag...

Reference a local anchor in the file:

<P>For more information, <A HRef = "#Link">click here</A> to jump to Link.

For more information, click here to jump to Link.

Reference to an anchor in a different file

<A HRef = "Link2#.file2.htm">Click here to jump to another file</A>.

Click here to jump to another file.

Reference using a picture

<P>Click the Esquilax <A HRef = "#About"><IMG Src = "esquilax.gif" Alt = "Our Logo" Border = 0></A> for more information.

Click the Esquilax [image] for more information.

Notes

When using HRef, you must declare the end of the link with /A. This is so the browser can know how much text to underline and where to change the mouse pointer shape.

The closing /A tag is not required when you define the anchor name, even though some HTML syntax checkers will flag this as an error. You can quickly tell if you've forgotten the closing tag; the browser will highlight all the text it finds until it comes upon the next /A tag.

You can reference another document simply by name; the browser will load the document and place the top of the page on the screen. To jump to a hyper-link within the document, specify the file name, a pound sign, and the name specified by the A Name attribute within that file; the browser will load the document, then move to the portion of the page containing the A tag and matching Name attribute.

Anchors are not case-sensitive within the current document. External references may be case-sensitive in some operating systems.

Name and Target are used only with documents opened within frames, using the FRAME tag. See Introducing Frames for how to use these specialized tags.

Local document references may use short names, or the complete URL. Browsers recognize HRef that begin with ftp, gopher, http, and mailto. Other browsers and Internet mail clients may recognize additional address forms.

<A HRef = "mailto:name@url">your name</A>

Do not use FONT within an A, /A structure. Netscape 4.x formats the entire paragraph as if it were a link.

<P><A HRef = "link"><FONT Face = "Times">
Jump to link</A><BR>
Description of the link.

Jump to link
Description of the link.

The corrected example below moves the FONT tag before the A tag.

<P><FONT Face = "Times"><A HRef = "link">
Jump to link</A><BR>
Description of the link.

Jump to link
Description of the link.

Compatibility

If a link spans between a graphic and text, the space between is underlined in Netscape, but plain in MSHTML.

Hyper-link names are often case-sensitive. Always use consistent capitalization conventions.

The standard requires quotation marks around names are unnecessary for simple names, but should be considered mandatory for HRef elements that include any characters except A-Z, a-z or numbers 0-9.

Not all browsers change the mouse pointer shape when you move the pointer over a link. Pictures must obviously describe links.

NCSA Mosaic, including version 3.0 (January 1997), changes neither the mouse pointer shape nor underlines links. You must ensure that links are visible.

Links that use pictures cause the pictures to have a color border. See IMG for how to turn off this annoying effect.

When a link is selected from within a frame that itself loads a frame, the frames may become nested, so that eventually you have lots of navigational frames but no room for content. Use Target = "_top" within the A tag to eliminate the frame clutter.

MSHTML Attributes

AccessKey, ID, DataFld, DataSrc, Lang, Language, Methods, Style, URN, events

Netscape 4 Attributes

OnClick, OnMouseOut, OnMouseOver

HTML 4 Attributes

AccessKey, CharSet, Class, Coords, Dir, HRef, HRefLang, ID, Lang, Name, Rel, Rev, Shape, Style, TabIndex, Target, Title, events

  Related Topics

  Style Topics


The A Tag

This HTML code defines hyper-links. The A Name attribute defines a reference anchor. The HRef attribute points to the anchor. We always use /A when we use HRef, because the browser highlights, usually underlined in a different color, links to make it easier for the user to recognize them.


doc1.htm

This document is the main page, defined by the HTML code shown at the left. The user clicks on hyper-links on this page to jump to links on this page, or in other documents.


The A Tag

The A tag Name attribute defines the destination of hyper-links. These links may be within the same document, or in any other document on the Internet.


doc2.htm

This document is the destination of the hyper-link defined in the first document. When the user clicks the Item 2 link in the first document, the browser loads this document, and places the section containing the A tag and Name attribute at the top of the screen.


ABBREV is rarely supported by browsers.


ABBREV tag
 ABBREV, /ABBREV

 ?

Attributes

Class

Dir

LTR

RTL

Compatibility

The ABBREV tag is not commonly supported.

HTML 4 Attributes

ID, Class, Lang, Title, Style, events

  Related Topics

  Style Topics


ACRONYM is a new HTML 4 tag, rarely supported.


ACRONYM tag
 ACRONYM, /ACRONYM

Format characters as an acronym; 4.0

This new tag adds a way to mark and define acronyms. Acronyms are coined words, generally in all upper-case letters, that are formed from letters in several words. For example ATM stands for Asynchronous Transfer Mode (or maybe it's Automatic Teller Machine, or Adobe Type Manager).

Much like Internet Explorer 3.0 and later display the Alt string for IMG tags when we move the mouse pointer over pictures, moving the mouse over a word delimited by ACRONYM tags displays the Title text. If a speech synthesizer is used, the ACRONYM tag tells the program to say the letters instead of trying to pronounce the letters as a word.

Attributes

Title = "Definition"	This optional attribute defines the acronym.

Example

<P>We often use <ACRONYM Title = "Asynchronous Transfer Mode">ATM</ACRONYM> protocol.

We often use ATM protocol.

Notes

The Title attribute should be an optional aid to the user. The sentence should be understandable to any reader without depending on the Title. Some browsers may display the Title, while others may use speech synthesis to say the definition.

While ACRONYM is rarely supported, you can achieve a similar effect by using the Title attribute with another character tag, such as I. Browsers that support Title will display the pop-up the description:

<P>We often use <I Title = "Asynchronous Transfer Mode">ATM</I> protocol.

Compatibility

Introduced in HTML 4.0. Not widely supported.

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


ADDRESS tag
 ADDRESS, /ADDRESS

Define the mailing address; 2.0

Usually placed near the bottom of a document, the ADDRESS element describes the author of the document. Frequently includes a mailing address.

Example

<ADDRESS>Written by R. Harvey<BR>
  E-mail: r_harvey@compuserve.com
</ADDRESS>

Written by R. Harvey
E-mail: r_harvey@compuserve.com

Notes

The ADDRESS element generally takes no attributes.

The ADDRESS tag automatically begins a new paragraph.

Separate lines in the mailing address with BR or P.

Compatibility

While recommended by every authority and style guide, the ADDRESS element is used primarily in technical documents, rarely on commercial or personal web sites.

Most browsers display the ADDRESS text in italics. This is the standard, but it is not always adhered to.

Attributes are supported by Internet Explorer 4 or later.

MSHTML Attributes

Align, Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


Applet is deprecated in HTML 4; OBJECT is the recommended replacement.


APPLET tag
 APPLET, /APPLET

Reference a Java Applet; 3.2

The APPLET tag embeds a Java Applet in the document.

Attributes

Align = position	Alignment of the object to text. Optional. Valid options are CENTER, LEFT, and RIGHT New Options include ABSBOTTOM, ABSMIDDLE, BASELINE, BOTTOM, MIDDLE, TEXTTOP, and TOP.

Alt = text	Text displayed by browsers that do not support Java.

Code = url	Name of the file containing the Applet.

CodeBase = url	Name of the directory containing the Applet. Optional.

Height = pixels	Initial height of the display area. Optional.

HSpace = pixels	Horizontal space on the screen around the Applet's display area. Optional.

Name = name	Identify the name of an Applet to other Applets used in the document. Optional.

Param Name =	Pass a value to an Applet This is equivalent to passing command line arguments to programs. The Value attribute declares the attribute value. Optional.

VSpace = pixels	Amount of blank space to leave on the screen above the Applet rectangle.

Width = pixels	Width of the Applet display area.

Notes

For information about Java and creating and using Applets, see Sun Microsystems on the Internet at http://java.sun.com [image].

Compatibility

Supported by late-model browsers only. Not supported by Windows CE 1.x.

Many users disable Java for performance or security.

Applet is deprecated in HTML 4; OBJECT is the recommended replacement.

MSHTML Attributes

Disabled, events

Netscape 4 Attributes

AccessKey, Alt, Archive, Code, CodeBase, Disabled, Lang, Language, MayScript, Src, Title

HTML 4 Attributes

Align, Alt, Archive, Code, CodeBase, Height, HSpace, Name, Object, VSpace, Width

  Related Topics


AREA tag
 AREA

Define an image map; IE3, 3.2

Define a hot spot in an image map on the client-side. AREA is used with the MAP tag.

Attributes

Alt = text	A short description. Optional.

Coords = text	Define the hot spot shape. This is a quoted string containing comma-delimited values that set the hot spot coordinates. The number of values varies depending on the Shape of the hot spot.

HRef = url	Destination of the hot spot. When the user clicks the hot-spot, the browser jumps to the specified URL.

NoHRef	The hot spot region is inactive. Clicking on it does nothing.

Shape = shape-type	Shape of the hot spot. Can have the value CIRC, CIRCLE, POLY, POLYGON, RECT, or RECTANGLE.

Target = window	Specify window to contain the link. Specify a valid name or a predefined window: _blank, _parent, _self, _top.

Example

<MAP Name = "Colors">

<AREA Shape = "RECT" Coords = "5,4,80,39" HRef = "#Red">
<AREA Shape = "RECT" Coords = "39,60,82,86" HRef = "#Green">
<AREA Shape = "RECT" Coords = "100,20,140,70" HRef = "#Blue">

</MAP>
<IMG Src = "menu.gif" UseMap = "#Colors">

Click on the illustration to see the HTML tags:

Notes

AREA is used with MAP to create multiple-hot spot client-side image maps.

Coords values depend on the shape of the object. RECT is the most commonly-used shape, because most images can be coerced into a rectangle. Some browsers also support circular hot-spots.

The order of arguments to Coords is different than coordinates used by programming languages like Basic. For rectangles, we specify the upper left column, then upper-left row, then rightmost column, and finally the bottom row. Values are zero-based, meaning the first column and row are zero, not one.

The Coords argument for the POLY Shape uses multiple pairs of coordinates, each representing a point of an angle of the polygon.

Before using an image map, decide if that is truly the best way to create a link. Often, we can simplify by replacing an image map with a picture and an A tag.

Compatibility

Supported by most late-model browsers.

Most browsers support RECT, some support CIRC, and only a few support other shapes.

MSHTML Attributes

ID, Lang, Language, Style, Title, events

Netscape 4 Attributes

OnMouseOut, OnMouseOver

HTML 4 Attributes

Alt, Coords, Shape, TabIndex, Target, events

  Related Topics

  Style Topics


<AREA Shape = "RECT" Coords = "5,4,80,39" HRef = "#Red">


<AREA Shape = "RECT" Coords = "39,60,82,86" HRef = "#Green">


<AREA Shape = "RECT" Coords = "100,20,140,70" HRef = "#Blue">


AU is rarely supported by browsers.


AU tag
 AU, /AU

?

Attributes

Class

Dir =

LTR

RTL

Compatibility

The AU tag is not commonly supported.

  Related Topics


B tag
 B, /B

Display text in bold type; 2.0

All text between the B and /B tags is displayed in bold type in the current font.

Example

<P>I <B>really</B> like fudge.

I really like fudge.

Notes

When the goal is to emphasize text, it is frequently better to use the STRONG tag. The STRONG tag is also preferred because it can be customized with a STYLE without affecting other use of bold type.

Be cautious when combining B with I (italic). If, for example, you start bold, then start italic, then turn off bold before turning off italic, browsers will react differently—and with unexpected results. Here is an example:

<P>This is an example of mixing <B>Bold and <I>Italic text,</B>then turning off Bold before </I>Italic.

Here are the results we would anticipate:

This is an example of mixing Bold and Italic text, then turning off Bold before Italic.

Netscape and Internet Explorer 3 or and earlier display the example like this:

This is an example of mixing Bold and Italic text, then turning off Bold before Italic.

Always correctly nest the bold and italic tags. This example shows the correct tags.

<P>This example mixes <B>Bold text with <I>Italic text,</I> without any</B> side effects.

This example mixes Bold text with Italic text, without any side effects.

Compatibility

Text-mode browsers may not support bold, perhaps displaying text in inverse or high-intensity video. Don't depend on boldface as the only way to distinguish display elements.

Internet Explorer 4 correctly displays mixed bold and italic text.

Attributes are supported by Internet Explorer 4 or later.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


BANNER is rarely supported by browsers.


BANNER tag
 BANNER, /BANNER

?

The BANNER tag was proposed for HTML 3.0, but never adopted.

Attributes

Class =

Dir =

LTR

RTL

Lang =

Compatibility

The BANNER tag is rarely supported.

  Related Topics


BASE tag
 BASE

Identify the document's URL address; 2.0

Specify the document base URL.

Attributes

HRef = url	Completely resolved URL address of the document.

Target = window	Optionally, when using frames, specify the name of the window. The window is specified by name or as _blank, _parent, _self or _top.

Example

<HEAD>
<BASE HRef = "http://ourworld.compuserve.com/r_harvey/homepages/index.htm" Target = "_top">

Notes

The BASE tag helps some browsers locate documents and design elements declared in the document. If you specify, for instance, a GIF picture that is in the same location as the document, BASE helps the browser keep from getting lost in a few million other possible paths.

You can eliminate frames from your documents by using the following BASE example with META:

<HEAD>
<BASE Target = "_top">
<META HTTP-Equiv = "REFRESH" Content = "0;index.htm">
</HEAD>

After a short delay, frames will be removed, and the second document will load. If you leave out the META tag from this example, the browser will escape from the frames when the reader clicks on any link.

See also LINK and Introducing Frames.

Compatibility

MSHTML Attributes

Class, ID, Lang, Language, Title

HTML 4 Attributes

HRef, Target

  Related Topics

  Style Topics


BASEFONT tag
 BASEFONT

Define default font; NS2

The BASEFONT tag sets default font style for any text not formatted by FONT or a style sheet.

Attributes

Color = color	 RGB Hex-triplet color value. The default text color is usually black (#000000).

Face = name	 Specify the font name, in quotation marks if it contains spaces. Separate multiple names with commas; the first matching font found will be used.

Size = size	An absolute font size 1-7, or relative size.

Example

Set the default font to blue in the Verdana font and standard size:

<BASEFONT Color = "#000099" Face = "Verdana, Arial, Helvetica" Size=3>

Notes

It is generally better to specify fonts where they are needed than to use the BASEFONT tag. If your document uses a single font, such as Verdana, use the FONT tag near the beginning of the file, and it will be used in most text elements.

If you want to change the font color to contrast with a dark background color or a background picture, be sure to use the BODY Text attribute.

The main use of using BASEFONT is to change the relative size of all fonts in the document. You may want to, for example, use one size larger font for everything:

<BASEFONT Size = +1>

You can use BASEFONT more than once in a document. Each use changes the appearance of all fonts until the next BASEFONT is encountered.

Compatibility

The Face attribute is supported by MSHTML, but ignored by Netscape 4 and earlier.

The BASEFONT tag is deprecated in HTML 4, the recommended replacement is style sheets; see Introducing Styles to see how to create style sheets.

Most browsers do not support styles, and only a few support BASEFONT, which means the FONT tag or H1 is the only way to change fonts in some browsers.

MSHTML Attributes

Class, ID, Lang, Title

HTML 4 Attributes

Class, Color, Face, ID, Size, Style, Title

  Related Topics

  Style Topics


BDO is a new HTML 4 tag, rarely supported.


BDO tag
 BDO, /BDO

Override bi-directional text; 4.0

Browsers display English-like text from left to right. The BDO tag tells the browser to display text from right to left for languages like Hebrew.

Attributes

Dir = direction	Specify text direction. This attribute is required.

LTR	Display text left to right.

RTL	Display text right to left.

Lang =	Language variant name of the language. For example, EN is English, and FR is French.

Example

<P>English text is left-to-right. Some <BDO Dir = "RTL">languages</BDO> (!) are right-to-left.

English text is left-to-right. Some segaugnal (!) are right-to-left.

Notes

Individual words and sentences are reversed. To right-justify the text, use the Align attribute to the P tag.

Documents using multiple-byte character sets like Unicode may contain characters that mark the language and text-direction.

Compatibility

Part of HTML version 4 specification; not supported by most browsers.

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title

  Related Topics

  Style Topics


BGSOUND is supported only by MSHTML and Opera.


BGSOUND tag
 BGSOUND

Play background sound; IE3

The sound plays as soon as the sound file is located, while text and graphic elements are drawn to the window.

Attributes

Loop = n	Number of times to play the sound file. Specify -1 or INFINITE to play continuously.

Src = url	Specify a sound file name. Supports sound samples in .WAV and .AU format, and MIDI sound files. Some browsers support only .WAV sound files.

Example

<BGSOUND Src = "cacophony.wav" Loop = INFINITE>

Notes

There can only be one background sound per document.

Playing continuous background sound is a sure way to encourage the reader to look for another page to look at.

Remember that the music plays every time we view your document. If it's too clever, too long, or too superfluous, we may just avoid coming back for another look at the document.

Compatibility

BGSOUND is not part of the HTML standard. Supported by MSHTML and Opera; just about everybody else will wonder what you're talking about. Mosaic uses the SOUND tag; Netscape uses EMBED. NCSA Mosaic 3 supports BGSOUND.

MSHTML Attributes

Balance, Class, ID, Lang, Title, Volume

  Related Topics

  Style Topics


BIG tag
 BIG, /BIG

Display larger text; 3.2

Display text one size larger.

Example

<P>Welcome to our <BIG>really big</BIG> show.

Welcome to our really big show.

Notes

To return normal to size text, use the /BIG tag, not SMALL.

The BIG tag is equivalent to FONT Size=+1.

A good use for BIG is with a STYLE, adding additional custom formatting like font or color changes to further emphasize text.

Compatibility

Supported by Netscape and MSHTML. Ignored by early browsers.

While Netscape 2.x ignores font face changes, it does allow you to change the size of the font with BIG and other tags.

Attributes are supported by Internet Explorer 4 or later.

Pocket Internet Explorer ignores BIG. Some font size changes are ignored because of limited font sizes available on those computers.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


BLINK is supported only by Netscape.


BLINK tag
 BLINK, /BLINK

Display text blinking; NS

If bold, italic, oversized text won't add enough impact, try using BLINK to make it blink on-and-off, on-and-off, on-and-off...

Example

<P>Just trying to get your <BLINK>attention!</BLINK>

Compatibility

BLINK is supported by Netscape 2.0 and later. Ignored by MSHTML.

  Related Topics

  Style Topics


BLOCKQUOTE tag
 BLOCKQUOTE, /BLOCKQUOTE

Indent left and right margins; 2.0

The BLOCKQUOTE tag indents the left and right margins. Every text element is indented, including headlines set with H1.

Some web sites use BLOCKQUOTE to indent text for newspaper-style column width. A narrower column of text is easier for the eye to track. Many feel that shorter lines of text, perhaps ten words or fewer, are more readable.

Example

<H2>Introduction</H2>
<BLOCKQUOTE><P>Welcome to the official cheese and chocolate home page. Here's state-of-the-art information about everything from Gouda to Ghiardelli.</P>
</BLOCKQUOTE>

Introduction
Welcome to the official cheese and chocolate home page. Here's state-of-the-art information about everything from Gouda to Ghiardelli.

Notes

A useful effect is to indent text with BLOCKQUOTE, but leave headlines left-flush. This makes it easy for the reader to site-down the left column for headings.

To indent text even more, try using multiple BLOCKQUOTE tags. Be sure that there is a matching /BLOCKQUOTE for each BLOCKQUOTE, because some browsers will crash if they un-indent a paragraph that wasn't indented in the first place.

Try using the Q tag to delimit a short quotation within a paragraph.

Compatibility

BLOCKQUOTE is supported by most browsers.

Multiple, nested BLOCKQUOTE supported only by later browsers. Always place the multiple nesting tags together to minimize errors.

Most browsers indent both left and right margins.

BLOCKQUOTE text is displayed in italic by some early browsers (Spyglass/Corel Mosaic, for instance).

Internet Explorer 3 or earlier does not indent lines created with the HR tag within BLOCKQUOTE sections.

Netscape 4 (not 3.0 or earlier) does not account for the indentation when a TABLE element is within a BLOCKQUOTE section. This makes tables wider than the screen. Avoid using TABLE within BLOCKQUOTE.

Attributes are supported by MSHTML and Internet Explorer 4 or later.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Cite, Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


BODY tag
 BODY, /BODY

Define the look of the document; 2.0

The BODY tag marks the main document body. You can also specify design elements.

Attributes

While BODY is required, all attributes are optional.

ALink = color	Specify the RGB hex triplet color of the highlighted active hyper-link. Not widely supported.

Background = url	The picture, in either .JPG or .GIF format, to display as the background to the document. The picture is repeated (tiled) as many times as necessary to fill the screen.

BGColor = color	 Specify the RGB hex triplet color of the document background. If the browser does not display Background pictures, or pictures are turned off, the BGColor element will be used.

BGProperties = FIXED	This attribute tells the browser to display the Background picture only once on the page, as a non-scrolling watermark. MSHTML only.

LeftMargin = pixels	Specify the amount of blank space to leave for the left margin of the page. MSHTML only.

Link = color	Specify the RGB hex triplet color of hyper-links that have not been visited.

MarginHeight = pixels	Specify amount of blank space to leave at the top margin of the page. If you specify 0 (zero), the document is displayed without any space above the first line. Netscape 4 only.

MarginWidth = pixels	Specify the amount of blank space to leave for the left margin of the page. Netscape 4 only.

Text = color	Specify the RGB hex triplet default text color for the document. This setting can be overridden by the FONT tag.

TopMargin = pixels	Specify amount of blank space to leave at the top margin of the page. If you specify 0 (zero), the document is displayed without any space above the first line. MSHTML only.

VLink = color	Specify the RGB hex triplet color of hyper-links that have been visited.

Example

<HTML><HEAD><TITLE>Welcome to Planet Chocolate</TITLE>
<BODY BGColor = "#FFFFFF" Text = "#000066">

<H1>Famous Desserts In History</H1>
<P>A famous Renaissance chef often said . . .
</BODY></HTML>

Notes

The BODY tag always follows the HEAD element in an HTML document.

If you would like a Background picture to be repeated vertically but not horizontally, create a picture wider than the widest likely screen, perhaps 1,200 pixels wide; the picture is repeated down the page as needed.

You can override BODY BGColor in TABLE cells using TD. Use this technique to create a document with a standard background color, then draw boxes with contrasting or complementary background colors within tables.

If you use Background, always use a similar BGColor. This ensures that the document and text are readable, even when the browser does not display pictures.

In Netscape 3 and earlier, bullets in UL bulleted lists are filled with the Text color set within HEAD, regardless of the current color set by FONT. Use this feature to create attractively colored bullets that are a different color than the surrounding text.

Most browsers display links in blue, and visited links in red; most users expect things to look this way. Whatever convention you adopt, please follow it for all related documents.

Compatibility

When design is important, you should always specify the background color. If you do not specify the BGColor, the background color of the page depends on the browser type. Netscape defaults to a white background; Internet Explorer and many other browsers use a light gray background.

Avoid using ALink, Link or VLink to change the color of links unless the BGColor would make standard colors unreadable. While common practice, it is generally considered bad form to change the color of links because the reader may have difficult detecting links.

Netscape normally indents the left and right margins of the page slightly, while MSHTML does not. Use the LeftMargin attribute with Internet Explorer to indent 8-12 pixels to make the document look more like Netscape. Netscape ignores LeftMargin and TopMargin.

Netscape 4 introduces the MarginHeight and MarginWidth attributes, which work like the MSHTML TopMargin and LeftMargin tags.

MSHTML Attributes

AccessKey, Align, BGProperties, Class, ID, Lang, Language, LeftMargin, Scroll, Style, Title, TopMargin, events

Netscape 4 Attributes

OnBlur, OnFocus, OnLoad, OnUnload

HTML 4 Attributes

ALink, Background, BGColor, Class, Dir, ID, Lang, Link, OnLoad, OnUnload, Style, Text, Title, VLink, events

  Related Topics

  Style Topics


BQ is rarely supported by browsers.


BQ tag
 BQ, /BQ

?

Attributes

Class

Clear

ALL

LEFT

RIGHT

Dir

LTR

RTL

ID =

NoWrap

Compatibility

The BQ tag is not commonly supported.

  Related Topics


BR tag
 BR

Start a new line of text; 2.0

The BR tag stops formatting on the current line and begins on the next line. Unlike the P tag, BR does not add extra space following the current line.

Attributes

Clear = position	Used after IMG, the Clear attribute moves text that follows below any floating images. Optional. There are three possible Clear values:

ALL	Move past all floating images.

LEFT	Move to the left margin, aligned below any floating image.

RIGHT	Move down to be aligned with a right-aligned floating image.

Example

<P>Each<BR>word<BR>is<BR>on<BR>a<BR>separate<BR>line!</P>

Each
word
is
on
a
separate
line!

Notes

We often use BR to start a new line without inserting extra space between lines.

If you need add extra space, start a new paragraph with the P tag, don't use multiple BR tags.

Compatibility

Most browsers ignore multiple BR tags.

Internet Explorer recognizes the Clear = NONE attribute, which tells the browser to continue formatting immediately following the image.

Pocket Internet Explorer 1.0-1.1 ignores the Clear attribute because it does not support the IMG Align attribute.

MSHTML Attributes

Class, ID, Language, Style, Title

HTML 4 Attributes

Class, Clear, ID, Style, Title, events

  Related Topics

  Style Topics


BUTTON is a new tag, not widely supported.


BUTTON tag
 BUTTON, /BUTTON

Display an interactive button; 4.0

Many computer programs use onscreen buttons to select options; for instance, when you click a "B" button, a word processor may format text in bold. The BUTTON tag adds similar capability to HTML pages.

Attributes

Disabled	The button is disabled. No argument to the Disabled attribute is required.

Name = text	Text displayed on the face of the button.

TabIndex = n	The page may contain multiple buttons; the TabIndex attribute specifies the order items are highlighted when navigating through elements on the page.

Type = type	Defines the purpose of the button. Required.

BUTTON	Trigger an event.

RESET	Reset a form.

SUBMIT	Submit a form.

Value = n	A constant value passed to the server when the button is pressed.

Example

<P>Click the button to continue.
<BUTTON Type = "SUBMIT">Click me</BUTTON>

Notes

Buttons are defined as three-dimensional rectangles that are filled with the Name text.

If the user does not have a mouse, the TabIndex makes it possible to move between buttons and links with a navigation key. Once the user has moved to a button (which will be highlighted), another keystroke "clicks" the button.

When the Type is BUTTON, an event handles the button click.

While most browsers do not support BUTTON, you can implement much of the same functionality with the INPUT tag's Type attribute.

Compatibility

Not supported by most browsers. HTML 4 standard.

Internet Explorer 4 documentation does not mention the Name attribute. The implementation appears to be incompatible with the HTML 4 standard.

MSHTML Attributes

AccessKey, Disabled, Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

AccessKey, Class, Dir, Disabled, ID, Lang, Name, OnBlur, OnFocus, Style, TabIndex, Title, Type, Value, events

  Related Topics


CAPTION is not widely supported. Formatting is inconsistent.


CAPTION tag
 CAPTION, /CAPTION

Define a table caption; 3.2

Used within a TABLE, the CAPTION tag formats a caption next to the table. By default, the caption is centered above the table.

Attributes

Align = position	Specify where to display the table caption.

BOTTOM	Align the caption centered below the table.

LEFT	Align the caption on the left above the table.

RIGHT	Align the caption on the right above the table.

TOP	The caption is displayed centered above the table. This is the default.

Example

<TABLE Cols = 4 Border = 4 BGColor = "#CCFFFF">
<CAPTION>Phoenix High Temperatures</CAPTION>
<TR> . . . </TR>
</TABLE>

Phoenix High Temperatures

Notes

The caption is displayed outside of the table.

The CAPTION tag must appear within a TABLE, but not within TR or TD. In most browsers you can specify the caption either before or following table rows without affecting where the caption is displayed on the page.

CAPTION ensures that the text is placed in a consistent, good looking position relative to the table, but font formatting is not changed. Add a formatting tag like EM or STRONG to make the caption stand-out; this example uses BIG:

<CAPTION><BIG>Phoenix High Temperatures</BIG></CAPTION>

Compatibility

CAPTION was introduced with HTML version 3.2, so it is rarely supported, and often with unusual effects. Try formatting a paragraph with the P and CENTER tags instead of using CAPTION.

While the Align attribute LEFT and RIGHT options would seem to place the CAPTION to the left or right of the table box, they do not. MSHTML left- or right-justifies the text above the table. LEFT and RIGHT are ignored by Netscape.

MSHTML supports a VAlign attribute, which can have the value TOP or BOTTOM. Used with the Align LEFT and RIGHT options, you can position the CAPTION at the left or right, either above or below the table.

The caption should be short; some browsers truncate long text instead of word-wrapping.

Pocket MSHTML requires the CAPTION tag to be within a TABLE element, but it cannot appear within a TR or TD. The caption is always left-aligned above the table.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, VAlign, events

HTML 4 Attributes

Align, Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


CENTER tag
 CENTER, /CENTER

Center text and pictures; NS2

The CENTER tag tells the browser to horizontally center all text and images.

Example

<CENTER>
<H1>Introduction</H1>
<P>An overview of butterfat </P>
</CENTER>
<P>For many, chocolate is a way of life. . .

Introduction

An overview of butterfat

For many, chocolate is a way of life. . .

Notes

Everything is centered until you use the /CENTER tag to return to left-justified text.

You can use CENTER to center headlines (H1).

You can align a single paragraph by using the Align attribute to the P tag.

Compatibility

An HTML standard, CENTER is supported by most late-model browsers. CENTER is ignored by early browsers (Spyglass/Corel Web Mosaic 2.0).

CENTER is deprecated, and may not be supported by later browsers. For new designs, use STYLE or style sheets.

Attributes are supported by MSHTML and Internet Explorer 4 or later.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title

  Related Topics

  Style Topics


CITE tag
 CITE, /CITE

Format reference to a citation; 2.0

Format titles of published material, such as books or newspapers, with the CITE tag.

Example

<P>The book of the week is <CITE>Hitchhiker's Guide to the Galaxy,</CITE> by Douglas Adams</P>

The book of the week is Hitchhiker's Guide the Galaxy, by Douglas Adams

Notes

References to books and newspapers are not delimited by quotation marks; chapter titles usually are in quotation marks, but not italic. The CITE tag gives us the opportunity to format these references using local conventions without concern about what those conventions are.

Compatibility

Not all browsers represent the CITE tag with italics.

Attributes are supported by MSHTML and Internet Explorer 4 or later.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


CODE causes a line break with older browsers. Use KBD instead.


CODE tag
 CODE, /CODE

Format text as source code example; 2.0

Format text in a small fixed-pitch font, such as Courier. CODE is often used in computer documentation when referring to function or program names.

Example

<P>The <CODE>DEBUG.EXE</CODE> program is a simple, easy way to customize the configuration of your computer.</P>

The DEBUG.EXE program is a simple, easy way to customize the configuration of your computer.

Notes

If a FONT is specified earlier in the document, it overrides the formatting applied by CODE.

For a heavier fixed-pitch font, try the KBD tag.

The CODE tag is often used to represent function names, while VAR is used for variable names. Following this convention ensures that the document uses consistent and standard formatting.

<P>The <CODE>Hex</CODE>(<VAR>number</VAR>) function converts a number to a string.

The Hex( number ) function converts a number to a string.

Compatibility

While usually interpreted as a character formatting tag, CODE causes a line break in some old browsers. Use KBD instead of CODE for greater compatibility.

Attributes are supported by MSHTML and Internet Explorer 4 or later.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


COL is not supported by Netscape 4.


COL tag
 COL

Define column properties in a table; 3.2

Set alignment properties for a column in a table. COL is used within a COLGROUP structure to define the structure of the table.

Attributes

Align =	Define text alignment for the column.

CENTER	Columns in this group are centered.

LEFT	Columns in this group are left-justified.

RIGHT	Columns in this group are right-justified.

ColSpan = n	Number of columns to which this formatting applies.

Span = n	Specify the number of columns in the group. Formatting affects all columns within this group.

VAlign =	Specify vertical alignment position. Options are BASELINE, BOTTOM, CENTER and TOP.

Width = n	Column width in pixels or percentage of screen width. Specify "0*" (zero and asterisk) to format the column only as wide as necessary to fit the contents.

Example

<TABLE Cols = 3 Border = 1 BGColor = "#99FF99" Width = "100%">

<COLGROUP>
 <COL Align = RIGHT>
 <COL Align = CENTER>
 <COL Align = LEFT Style = "color: purple">
</COLGROUP>

<TR><TD>Col 1</TD><TD>Col 2</TD><TD>Col 3</TD></TR>
<TR><TD>Col 1</TD><TD>Col 2</TD><TD>Col 3</TD></TR>
</TABLE>

Notes

Notice that in the example, we used the Style attribute to change the color of text in the third column. Unfortunately, Internet Explorer 3 ignores the style change.

COL is used with COLGROUP.

The COL and COLGROUP tags are usually not necessary. Other tags offer greater control over TABLE elements.

Compatibility

Supported by Internet Explorer, not by Netscape.

While now an HTML standard, COL is not widely supported. Use the Align attribute of the TD tag to format table cells.

MSHTML Attributes

Class, ID, Style, Title, Width, events

HTML 4 Attributes

Align, CellHAlign, CellVAlign, Char, CharOff, Class, Dir, ID, Lang, Span, Style, Title, VAlign, Width, events

  Related Topics

  Style Topics


<TR><TD>Col 1</TD>

(Right-aligned text by COL Align = RIGHT)


<TD>Col 2</TD>

(Centered text by COL Align = CENTER)


<TD>Col 3</TD></TR>

(Left-aligned text by COL Align = LEFT)


COLGROUP is not supported by Netscape 4.


COLGROUP tag
 COLGROUP, /COLGROUP

Define column properties in a table; 3.2

Specify attributes for several columns in a TABLE. The COLGROUP tag is a high-level way to define column properties like text alignment and column width.

Attributes

Align =	Define text alignment for the column.

CENTER	Columns in this group are centered.

LEFT	Columns in this group are left-justified.

RIGHT	Columns in this group are right-justified.

ColSpan = n	Number of columns to which this formatting applies.

Span = n	Specify the number of columns in the group. Formatting affects all columns within this group.

Width = n	Column width in pixels or percentage of screen width. Specify "0*" (zero and asterisk) to format the column only as wide as necessary to fit the contents.

Example

<TABLE Cols = 3 Border = 1 BGColor = "#99FF99" Width = "100%">

<COLGROUP>
 <COL Align = RIGHT>
 <COL Align = CENTER>
 <COL Align = LEFT Style = "color: purple">
</COLGROUP>

<TR><TD>Col 1</TD><TD>Col 2</TD><TD>Col 3</TD></TR>
<TR><TD>Col 1</TD><TD>Col 2</TD><TD>Col 3</TD></TR>
</TABLE>

Notes

The COL and COLGROUP tags are usually not necessary. Other tags offer greater control over TABLE elements.

Compatibility

Supported by Internet Explorer, not by Netscape.

While now an HTML standard, COLGROUP is not widely supported. Use the Align attribute of the TD tag to format table cells.

MSHTML Attributes

Class, ID, Style, Title, VAlign

HTML 4 Attributes

Align, CellHAlign, CellVAlign, Char, CharOff, Class, Dir, ID, Lang, Span, Style, Title, VAlign, Width, events

  Related Topics

  Style Topics


COMMENT is supported only by some versions of MSHTML. Use !-- instead.


COMMENT tag (non-standard)
 COMMENT, /COMMENT

Mark a hidden comment; 2.0

Mark text as comments. Text between COMMENT and /COMMENT tags is ignored.

Example

<P>Greetings to <COMMENT>Secret decoder ring message </COMMENT>my readers!

Greetings to my readers!

Notes

Codes within the COMMENT block may be interpreted, even if the text is ignored.

Somebody, somewhere, will accidentally see the comments declared with the COMMENT tag. You're much better off using standard !-- comments.

Compatibility

COMMENT is not supported by Netscape or other commonly used browsers. Not supported by Pocket Internet Explorer for Windows CE! For portability, use the !-- tag to insert comments.

COMMENT is an MSHTML extension, not part of the HTML standard. Supported by some versions of Mosaic.

MSHTML Attributes

ID, Lang, Title

  Related Topics

  Style Topics


CREDIT is rarely supported by browsers.


CREDIT tag
 CREDIT, /CREDIT

?

Attributes

Class =

Dir =

LTR

RTL

Lang =

Compatibility

The CREDIT tag is not commonly supported.

  Related Topics


DD tag
 DD

Create a definition list description; 2.0

The DD tag marks a description field in a DL definition list.

Example

<DL>
<DT>Reality:
  <DD>Everything not having to do with a computer.
<DT>Virtual Reality:
  <DD>Using a computer for $1 per minute.
</DL>

Reality:
      Everything not having to do with a computer.
Virtual Reality:
      Using a computer for $1 per minute.

Notes

The DL tag creates a definition list; the DT tag marks a term in the list, and DD marks the definition of the term.

/DD at the end of each definition is optional and unnecessary.

Compatibility

Part of original HTML 2.0 standard; supported by most browsers.

Attributes are supported by Internet Explorer 4 or later.

MSHTML Attributes

Align, Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


DEL is a new tag, not widely supported.


DEL tag
 DEL, /DEL

Mark text deletions; 4.0

The DEL and INS tags mark amendments to a document, such as a license, design, or legal document. These tags are annotations; they may not alter the appearance of a document.

Attributes

Cite = url	Identify the document describing the reason for the change.

DateTime = Text	Date of this revision.

Example

<DEL Cite = "rev2.txt" DateTime = "1998-09-04T20:45:00-07:00">The terms of the agreement are binding and not subject to revisions.</DEL>

The terms of the agreement are binding and not subject to revisions.

Notes

In some implementations, text marked with DEL or INS may be displayed or hidden.

The DateTime string tells the browser the date and time the change was made. The text must be in the format "YYYY-MM-DDThh:mm:ssTZD". Here are the meanings of the DateTime fields:

YYYY	Four-digit year as a number.

MM	Two-digit month. January is 01, February is 02, and so forth.

DD	Two-digit day of the month from 01 through 31.

T	Literal character, marks the beginning of the time field.

hh	Two-digit hour 00-23, in 24-hour format.

mm	Two-digit minutes 00-59.

ss	Two-digit seconds 00-59.

TDZ	Time zone. "z" indicates UTC (Coordinated Universal Time). Use an offset-time relative to UTC for other time zones. For instance, use "-08:00" if the local time is 8 hours behind UTC.

Compatibility

DEL and INS are new tags, supported by few browsers. Any text marked with either tag will be displayed normally, without any special formatting.

HTML 4 Attributes

Cite, Class, DateTime, Dir, ID, Lang, Style, Title, events

  Related Topics


DFN is a standard tag, but handling is not consistent in many browsers. Use EM instead for more reliable formatting.


DFN tag
 DFN, /DFN

Format text as a definition; 2.0;

The DFN tag formats text as a definition, often in italic. Occasionally found in technical documents, the DFN tag is used to highlight the definition of a term the first time it appears in a document.

Example

<P>Chocolate is made from cacao. <DFN>The cacao bean grows on trees in tropical South America.</DFN>

Chocolate is made from cacao. The cacao bean grows on trees in tropical South America.

Notes

The CITE tag formats text in italic, and is more widely and consistently supported. The main value of the DFN tag is its ability to be overridden by a STYLE definition. This feature does not work with Netscape because Netscape ignores DFN.

Compatibility

While part of the HTML 2.0 standard, DFN has unexpected results on many browsers. Internet Explorer, Corel Mosaic, and Opera format the text in italic. Spry Mosaic uses bold. NCSA Mosaic 3 and Netscape (through version 4.05) ignore the tag.

Attributes are supported by MSHTML and Internet Explorer 4 or later.

MSHTML Attributes

Class, ID, Lang, Language, Style Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


DIR is deprecated in HTML 4. Use UL.


DIR tag
 DIR, /DIR

Start a directory list; 2.0

The DIR tag formats a directory list. Often, the list is displayed in multiple columns if there is enough room on the screen and the feature is supported by the browser.

Attributes

Type = type	Change the appearance of the bullet displayed at the beginning of each line. Netscape only. Three bullet shapes are supported:

CIRCLE	 A hollow round bullet.

DISC	 A solid color round bullet. This is the default Netscape bullet.

SQUARE	 A solid color square bullet.

Example

<DIR>East wing rooms:<BR>
<LI>Kitchen
<LI>Dining Room
<LI>Scullery
</DIR>

East wing rooms:
    Kitchen
    Dining Room
    Scullery

Notes

Each item in the list should contain no more than twenty characters. Begin each item in a directory list with the LI tag.

The standard for DIR specifies that the list is displayed in a multiple-column list, which is why each entry is limited to twenty characters. Virtually nobody supports this feature, instead displaying the directory exactly like MENU.

Compatibility

On most browsers, the DIR tag works exactly like MENU. In some browsers, the DIR list does not have a bullet at the beginning of each line.

In Netscape and MSHTML, DIR works exactly like MENU and UL. For this reason, DIR is deprecated in HTML 4; the recommended replacement is UL.

The Type attribute is supported by Netscape to override the standard bullet symbol.

If you are supporting Netscape, be sure to use the Type attribute to override the big, ugly ball displayed at the beginning of each line.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Compact, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


DIV tag
 DIV, /DIV

Start document section division; 3.2

The DIV tag marks divisions within a document that share common formatting. DIV is used with ID and Class attributes. When used with style sheets, DIV allows individual portions of a document to use different style sheets.

Attributes

Align = position	Define the position of the design element, relative to the page or table.

CENTER	Align horizontally centered.

LEFT	Align at the left edge of the page or table.

RIGHT	Align at the right edge of the page or table.

Class = container	Assign this division a class that was defined in the style sheet. Optional.

ID = 	SGML identifier; the target of hypertext links, or style sheet associations.

NoWrap	Do not wrap text.

Style = 	Specify styles to be used in this division.

Example

<P>First, some left-aligned text.
<DIV Align = "RIGHT">This text is right-aligned.</DIV>
And now, back to left-aligned text.

First, some left-aligned text.

This text is right-aligned.

And now, back to left-aligned text.

This example, written in Internet Explorer 3 syntax, uses the Style attribute to change the text just within a division:

<P>This is regular text. <DIV Style = "font-weight: bold; color: purple; font-family: Arial"> This text is purple.</DIV> And now back to regular text.

This is regular text.
This text is purple.
And now back to regular text.

Notes

DIV can attach a style sheet to a portion of a document. However, DIV can also add direct formatting, without using a style sheet.

Changing text alignment with DIV does not add extra space between lines; it is not equivalent to a P paragraph break. As in the examples above, text is single-spaced, much like BR provides. Be sure to add extra formatting codes to maintain spacing, and for browsers that do not support DIV.

In most implementations, we just use the Align attribute. Other attributes are used with browsers that support style sheets.

The Style attribute, supported by late browsers, makes it possible to override current formatting for just a small section, then return to the original formatting, without concern for what the original formatting is.

Use the SPAN tag to apply a style to just a portion of a paragraph or list item.

Compatibility

DIV is ignored by early browsers.

Netscape 3 does not support styles or style sheets, but it does support DIV for simple direct-formatting.

Netscape 4 may apply some style formatting to the paragraph preceding the division defined with DIV. This usually happens if the preceding paragraph uses the P Style attribute. To work-around this problem, end paragraphs that precede DIV with /P.

MSHTML Attributes

DataFld, DataFormatAs, DataSrc, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Align, Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


DL tag
 DL, /DL

Start a definition list; 2.0

A definition list is a two-column list. Each section in the list begins with a top item formatted with the DT tag, left-justified on the page. Next is the definition of the topic, formatted with the DD tag, which is indented on the following line.

Attribute

Compact	This attribute tells the browser to format each term and definition without extra white space, perhaps in adjoining columns on the same line.

Example

<DL>
<DT>Reality:
  <DD>Everything not having to do with a computer.
<DT>Virtual Reality:
  <DD>Using a computer for $1 per minute.
</DL>

Reality:
      Everything not having to do with a computer.
Virtual Reality:
      Using a computer for $1 per minute.

Notes

The DL tag creates a definition list; the DT tag marks a term in the list, and DD marks the definition of the term. The DT line is left-justified; the DD section is indented.

Compatibility

Part of original HTML 2.0 standard; supported by most browsers.

The Compact attribute is rarely supported.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Compact, Dir, ID, Lang, Style, Title events

  Related Topics

  Style Topics


DOCTYPE tag
 DOCTYPE

Describe HTML version compliance

The !DOCTYPE tag, placed at the very top of the document before the HTML tag, contains a string describing the document type and level of HTML it supports.

See !DOCTYPE.

  Related Topics

  Style Topics


DT tag
 DT

Mark a term in a definition list; 2.0

A definition list is a two-column list. The list always begins with the DL tag. The DT tag marks a term in the list, which is left-justified on the page. Next is the definition of the topic, formatted with the DD tag, which is indented on the following line.

Example

<DL>
<DT>Reality:
  <DD>Everything not having to do with a computer.
<DT>Virtual Reality:
  <DD>Using a computer for $1 per minute.
</DL>

Reality:
      Everything not having to do with a computer.
Virtual Reality:
      Using a computer for $1 per minute.

Notes

The DL tag creates a definition list; the DT tag marks a term in the list, and DD marks the definition of the term.

The closing /DT tag is optional, and unnecessary.

Compatibility

Part of original HTML 2.0 standard; supported by most browsers.

Internet Explorer may not indent paragraphs formatted with DT. Pocket Internet Explorer does indent the text.

MSHTML Attributes

Align, Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


Earth

Blue, third planet from yellow sun; 1.0 beta

Compatibility

mostly harmless.


EM tag
 EM, /EM

Format text in emphasized style; 2.0

Formatting text with the EM tag changes the font to italic.

Example

<P>Typographical emphasis adds <EM>clarity</EM> and <EM>variety</EM> to documents.</P>

Typographical emphasis adds clarity and variety to documents.

Notes

Similar to CITE and DFN, EM is a portable way to add emphasis to text without specifying italic. When you aren't sure if italic text is supported, EM is a great way to highlight text.

Avoid tagging long passages of text with EM, because italic text is difficult and slow to read when presented in long paragraphs.

Compatibility

Supported by most browsers. Text is typically displayed in italic text in the current FONT.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


EMBED tag
 EMBED

Tag an embedded object; 2.0

The EMBED tag makes it possible to insert any document on the current page. EMBED is similar to IMG, but it allows you to embed any information. Often used to enable plug-ins and multimedia enhancements that require add-in players or file viewers.

Attributes

AutoStart = TRUE	Set if you would like the inserted file to be read automatically when the main document is loaded.

Border = pixels	Size of the object border, in pixels.

Height = pixels	Height of the screen area reserved for the object.

Hidden = TRUE	Set if you do not want a window or icon displayed for the object. Useful if, for instance, you want to play a sound file (WAV), but you don't want a toolbar or pop-up window for the file.

Optional Param = value	Parameters required to enable the object.

Src = url	Name of the file that is the source of the object.

Width = pixels	Width of the screen area reserved for the object.

Example

Play a movie in a small window:

<EMBED Src = "demo.avi" Width = 100 Height = 80>

Automatically play a sound file when the document is loaded:

<EMBED Src = "albatross.wav" AutoStart = TRUE Hidden = TRUE>

Notes

The EMBED tag is similar to IMG. For that reason, it also supports many of the same attributes.

Most browsers must be configured by installing add-ins before they can use any embedded document. If, for example, you embed a GIF picture, the browser will look for an add-in viewer, instead of displaying the picture as it would for IMG.

Compatibility

Netscape uses EMBED to play sound. Internet Explorer recommends BGSOUND (MSHTML also supports EMBED to play sound), and Mosaic uses SOUND.

When the reader has turned pictures off, some browsers (Netscape and Internet Explorer) will still interpret EMBED tags. This means you can play an object whenever your document loads, regardless of if pictures are displayed.

Attributes for EMBED are platform-specific, with extensions added (and perhaps documented) independently of any standards.

For portability, instead of EMBED, use IMG or OBJECT when practical. You may be able to insert an object using APPLET.

MSHTML Attributes

AccessKey, Align, Class, Hidden, ID, Lang, Language, Name, Optional Param, Palette, PlayBack, PlugInSpace, Style, Title, events

Netscape 4 Attributes

Align, FrameBorder, HSpace, Name, Palette, PlugInSpace, VSpace

  Related Topics

  Style Topics


FIELDSET is a new HTML 4 tag, rarely supported.


FIELDSET tag
 FIELDSET, /FIELDSET

Define a group of controls; 4.0

The FIELDSET tag is used to group multiple INPUT tags into a related group.

FIELDSET and LEGEND are new tags, not supported by most current browsers.

Compatibility

Part of the HTML 4 specification. Not supported by Netscape 3 or early releases of Internet Explorer 4.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, events

  Related Topics


FN is rarely supported by browsers.


FN tag
 FN, /FN

?

Attributes

Class =

Dir =

LTR

RTL

ID

Lang =

Compatibility

The FN tag is not commonly supported.

  Related Topics


FONT tag
 FONT, /FONT

Define font display properties; IE2, 3.2

The FONT tag changes the text color, size, and type face.

Attributes

Color = color	 Specify the RGB hex triplet color for the font. If you do not specify a Color, the default, or the color set with the BODY element, is used.

Face = name	Specify the font name. This is the name of the font displayed in word processors, for instance, Times New Roman is a standard Windows font. Specify multiple font choices by separating them with commas. If the font name contains one or more spaces, or you specify more than one font, the names must be within quotation marks. See Font Samples.

Size = n	The default font size is 3; 1 is smallest font size available, 7 is largest. To increase the font size relative to the base size, use a plus; for instance Size=+1. To decrease the relative font size, use a minus, such as Size=-1.

Example

<P><FONT Face = "Arial, Helvetica, Swiss" Color = "#0000FF" Size = 5>
This text is in large, bright blue, sans serif type.
</FONT>This is in the default font.
<FONT Size = -1>This is the default font, but smaller than the standard size.</FONT>

This text is in large, bright blue, sans serif type. This is in the default font. This is the default font, but smaller than the standard size.

Displayed on a browser that doesn't recognize font names, such as Netscape 2, the example looks like this:

This text is in large, bright blue, sans serif type. This is in the default font. This is the default font, but smaller than the standard size.

Notes

The FONT tag specifies the font description; to change font attributes, B for bold, I for italic text, and U for underlined text.

The font size is relative to the base font size, which is user customizable in most browsers. The following illustration shows fonts in sizes 1-7.

The exact size of text depends on the browser configuration, computer type, and video resolution. The illustration above is proportioned for VGA displays with default fonts.

The Face attribute, introduced in 1996, allows the document to change the font face in addition to size and color. Since the document must display acceptably on many platforms and we cannot be sure a specified font name is available, we can request several font families, separated by commas. In our attribute illustration above, we request the Arial typeface; if Arial is not available, the browser looks next for Helvetica, then Swiss; if none are available, the browser uses the default font.

The font size change is relative to the BASEFONT size setting; cumulative Size changes are ignored.

The trend today is to specify small sans serif fonts for all body text, which makes room for more information on the page and looks good with extra blank space. Consider your audience before selecting small fonts—many prefer default font sizes, which is why they made them the default in the first place.

Compatibility

FONT is ignored by early browsers including NCSA Mosaic, CompuServe Mosaic and Corel Web Mosaic.

In Netscape 3, the current FONT is ignored when you open a TABLE. You must declare a FONT within every cell in the TABLE. The original FONT is restored following the /TABLE tag. You can also use the BASEFONT tag to change the default font for the document—and the default font within tables.

Do not use FONT within an A tag structure. See the A tag example.

All versions of NCSA Mosaic, as well as Netscape before version 3.0, ignore the Face attribute. If you use a table with a color background and a contrasting font color, make sure the color of the font displays well in the standard background color without the table color.

Some HTML editors default to only a single type style for the Face attribute, without suggesting alternate type styles. If you can, try to specify at least one alternate font Face.

You must use /FONT after using FONT; otherwise, in Netscape 3 and Internet Explorer 3, the BASEFONT changes to the last typestyle set with FONT.

Pocket Internet Explorer 1.x has a limited number of font sizes available. Changes of plus or minus one font size are ignored.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

Netscape 4 Attributes

Point-Size, Weight

HTML 4 Attributes

Color, Face, Size

  Related Topics

  Style Topics


<FONT Size = 1>


<FONT Size = 2>


<FONT Size = 3>


<FONT Size = 4>


<FONT Size = 5>


<FONT Size = 6>


<FONT Size = 7>


FORM tag
 FORM, /FORM

Define a form; 2.0

Data forms provide ways for the reader to fill-in questionnaires and make selections in HTML documents. The FORM tag combines data elements to create a single form.

Attributes

Action = url	The address to receive the user's data that was entered in the form.

Method = method	Specify how the data is sent to the server.

GET	Append data to the URL and use it as an anchor.

POST	Send the data to the server as a transaction.

Target = window	Specify the destination window for the form submission.

blank	Load into a new blank window.

parent	Load into the parent of this document.

self	Load into the same window.

top	Load to the full window.

window	Load into the targeted window.

Example

<P>Please vote for your favorite
<FORM Target = "top" Action = "mailto:url" Method = "post">

Flavor:
<INPUT Type = "TEXT" Name = "Flavor" Size = "24,1" MaxLength = 200><BR>

Topping:
<INPUT Type = "TEXT" Name = "Topping" Size = "24,1" MaxLength = 200><BR>

<INPUT Type = "SUBMIT">
</FORM>

Please vote for your favorite
Flavor:
Topping:

Notes

Forms are wrappers for BUTTON, INPUT, SELECT and TEXTAREA. Within the form, we create separate input fields, including radio buttons ( [image] and check boxes ( [image]), and multiple-line data entry fields.

Combine multiple data items together with one FORM tag. All items are submitted together.

You can use multiple forms on a page; each is submitted separately. Make sure the document design clearly separates multiple forms on a page to avoid confusion about what data is submitted, and what is ignored.

The browser interprets the tags and submits the results. See Introducing Forms.

Compatibility

Supported by most browsers.

MSHTML Attributes

Class, EncType, ID, Lang, Language, Name, Style, Title, events

Netscape 4 Attributes

EncType, OnReset, OnSubmit

HTML 4 Attributes

Accept-CharSet, Action, Class, Dir, EncType, ID, Lang, Method, OnReset, OnSubmit, Style, Target, Title, events

  Related Topics

  Style Topics


FRAME tag
 FRAME

Define a frame in a FRAMESET; IE3, NS2, 3.2

Frames, created with the FRAME and FRAMESET tags, turn HTML pages into multiple-window screens. The FRAME tag defines a single frame, or document window, within the screen, which is defined by FRAMESET .

Attributes

Align = position	Describe the alignment of the frame within the document window: BOTTOM, CENTER, LEFT, RIGHT, and TOP.

FrameBorder = n	Describes the frame border:

1	Draw a 3-D border around the frame. This is the default.

0	Display no border.

MarginHeight = n	Height of vertical frame margins. Specified in pixels.

MarginWidth = n	Width of horizontal frame margins. Specified in pixels.

Name =	This required attribute is the name of the frame. When A tags use the Target attribute reference a frame, they use this name. The name is case sensitive. Some pre-defined names are reserved: _blank, _parent, _self, and _top.

NoResize	if present, this attribute prevents the user from re-sizing the frame. Useful for fixing the size of a small frame that contains a navigational aid or important picture. The NoResize attribute is considered bad style for other uses, because it imposes our style on the user's computer.

Scrolling =	Describes how the document is viewed within the frame:

NO	Don't allow contents of the frame to scroll. Scroll bars are not drawn around the frame.

YES	Allow frame contents to scroll. The frame will have vertical and/or horizontal scroll bars.

Src = url	The HTML document name to load into this frame when it is opened. Other documents may be loaded into the frame to replace the original document after it has been loaded.

Example

<FRAMESET FrameSpacing = 2 Cols = "25%,*">
<FRAME Scrolling = "YES" Name = "TOC" MarginWidth = 2 Src = "sitemap.htm">

<FRAME Scrolling = "YES" Name = "Main" MarginWidth = 0 Src = "welcome.htm">
</FRAMESET>

Notes

Frames do not require programming. You can create the main frame document using only HTML tags.

See the FRAMESET example for how to create multiple-window frames using nested FRAMESET tags.

Use IFRAME to create floating frames. Netscape 4 offers ILAYER to create inflow layers.

Compatibility

Frames are supported by most late-model browsers.

MSHTML Attributes

BorderColor, Class, Height, ID, Lang, Language, Title, Width, events

Netscape 4 Attributes

FrameBorder, OnBlur, OnFocus, OnLoad

HTML 4 Attributes

FrameBorder, LongDesc, MarginHeight, MarginWidth, Name, NoResize, Scrolling

  Related Topics

  Style Topics


Demo - No, it's not hiding here. It's only a few dollars, so why not just buy it?


FRAMESET tag
 FRAMESET, /FRAMESET

Define a multiple-window frame layout; IE3, 3.2

FRAMESET defines the structure of multiple-window documents.


<FRAMESET FrameBorder = 0 Rows = "80,*">

<FRAME Scrolling = "NO" Name = "Logo" MarginWidth = 0 Src = "logo.htm">


<FRAMESET FrameSpacing = 2 Cols = "25%,*">

<FRAME Scrolling = "YES" Name = "TOC" MarginWidth = 2 Src = <"sitemap.htm">


Scroll Bar

This is the scroll bar for the left (sitemap.htm) window. There is a scroll bar because we set Scrolling = "YES" in the FRAME declaration.


<FRAME Scrolling = "YES" Name = "Main" MarginWidth = 0 Src = "welcome.htm">


Scroll Bar

This is the scroll bar for the right window. There is a scroll bar because we set Scrolling = "YES" in the FRAME declaration.


H1, H2, H3... tags
 H1, H2..., /H1, /H2...

Mark a section headline; 2.0

Format a paragraph as a section heading. Headlines, often called headings, are similar to default heading styles in many word processors. Headings are used for hierarchical design, where main topics are in larger type, and sub-headings within each topic are in progressively smaller topic.

Six heading text sizes are available; H1 is the largest, H6 is the smallest.

Attributes

Align = position	By default headings are left justified. You can change the alignment for visual impact.

CENTER	Center the heading.

LEFT	Left-justify the heading. This is the default. You can use this attribute to left-justify the heading even after using CENTER to center other text.

RIGHT	Right-justify the heading.

Example

<H1>Main Topic</H1>
<P>Text for the main topic. . .</P>

<H2>Sub-topic One</H2>
<P>Text describing the sub-topic. . .</P>

Main Topic
Text for the main topic. . .

Sub-topic One
Text describing the sub-topic. . .

Notes

Heading levels are typographical conventions, not firm rules for technical documents. There is no requirement to use headings in any order or to use all of them. Many use H2 without ever using H1, because the font size change is less dramatic.

Browsers add extra space before and after headings. If exact spacing is critical, you may have to emulate headings manually by emphasizing headline text with B, BIG, or EM, then separating the headline from body text with a BR tag:

<P><BIG><EM>Topic Title</EM></BIG><BR>
Body text following the header. . .

We often say headline when we mean heading level. This convention is useful to avoid confusing headings with the HEAD tag, and word processor document headers.

Compatibility

The Align attribute is ignored by early browsers.

Everybody supports headings, but not everybody agrees about how large or bold they should be. Assume that the heading will always be larger than the default font down to H4; beyond that is difficult to predict.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Align, Class, Dir, ID, Lang, Style, Title, events

  Related Topics


HEAD tag
 HEAD, /HEAD

Mark the head of an HTML document; 2.0

The HEAD portion of an HTML document contains tags that describe the document. The HEAD section is placed near the top of the document, immediately following the HTML tag, The required HEAD section contains elements like META and TITLE that tell the browser or search engine how to interpret the document.

Example

<HTML>
<HEAD><TITLE>Pizza Central Home Page</TITLE>
</HEAD>
<BODY BGColor = "#FFFFFF"><P>And the document begins here. . .

Notes

The HEAD section immediately follows the HTML tag.

Several tags are allowed within the HEAD section. See BASE, LINK, META, NEXTID, STYLE, and TITLE for more information and examples.

Compatibility

Supported and required by all browsers.

Internet Explorer does not require the /HEAD tag.

Attributes are supported by MSHTML. Attributes probably should be avoided for compatibility with some browsers.

MSHTML Attributes

Class, ID, OnSelectStart, Style, Title

HTML 4 Attributes

Dir, Lang, Profile

  Related Topics

  Style Topics


Browser Screen

The text on the blue background is the TITLE. The BODY tag starts the main document.


HR tag
 HR

Draw a horizontal line on the page; 2.0

A horizontal line is the simplest graphic design element available for HTML documents. Horizontal rule rules, created with the HR tag, are often used to visually separate portions of a document. The default horizontal rule is the full width of the screen, approximately three pixels high, with a three-dimensional shadow; you can customize most display attributes.

Attributes

Align = position	If the Width of the horizontal rule is less than the screen width, the line is centered. You can tell the browser to change alignment.

CENTER	Center the horizontal rule. This is the default.

LEFT	Left-align the horizontal rule on the page.

RIGHT	Right-align the horizontal rule on the page.

Color = color	 Specify the RGB hex triplet color for the line. The line is a single color, without 3D effects; combine with Size for a thicker line. MSHTML only.

NoShade	This attribute tells the browser to display the rule without three-dimensional shading.

Size = pixels	Specify the height of the rule.

Width = n	Specify the width as a percentage of screen width or absolute width in pixels.

Example

<P Align = CENTER><B>Committee Report</B><HR Width = 320>
<P>The Committee has determined that further study on the subject is recommended.

Committee Report
—————————————————————

The Committee has determined that further study on the subject is recommended.

Notes

HR always causes a line break. Nothing is printed on the same line as the horizontal rule. By default, HR draws centered lines that are shorter than the screen width. Use Align to create left- or right-justified lines. All attributes are optional.

Appearance is (as usual) dependent on browser type and operating environment. The three-dimensional effect is more pronounced when the screen background is not white. Here are how standard rules look in popular browsers, with white or gray backgrounds:

You can use HR within TABLE cells. The width elements are relative to the width of the TABLE cell; if, for instance, the cell is 200 pixels wide and the rule is 50% wide, the rule is 100 pixels wide.

Try using a thick line, less than half the screen width, and left-aligned—something like we've used on this page—to visually separate topics on a page, while leaving white space on the right. White space, used carefully, is a pleasing design element.

<HR Width = "50%" Align = "LEFT" Size = 5>

Compatibility

Older browsers ignore Width and NoShade attributes. Corel/Spry Mosaic 2 always displays a single-pixel black line.

On Netscape, thick rules with the NoShade attribute have rounded ends. Internet Explorer displays thick rules with square ends.

Used within a BLOCKQUOTE section, Netscape indents the line. Internet Explorer 3 and earlier draws the line to the outer margins; corrected in IE 4.

Netscape 4 often makes TABLE columns too narrow. You can add a horizontal line, using the HR Width attribute set to the minimum cell width, to ensure that the table column is wide enough.

The HR Align attribute is deprecated in HTML 4.

MSHTML Attributes

Class, ID, Lang, Language, Src, Style, Title, events

HTML 4 Attributes

Align, Class, ID, NoShade, Size, Style, Title, Width, events

  Related Topics


HR Tag Samples

Each browser draws horizontal rules differently, from a single thin line, to a thick, three-dimensional box. Lines drawn on a color background look more three-dimensional.


HTML tag
 HTML, /HTML

Mark the beginning and end of an HTML document; 2.0

Placed at the beginning of every document, the HTML tag marks it as an HTML file. The /HTML tag is the last thing in every document.

Example

<HTML><HEAD><TITLE>Welcome to Planet Chocolate</TITLE>
<BODY BGColor = "#FFFFFF" Text = "#000066">

<H1>Famous Desserts In History</H1>
<P>A famous Renaissance chef often said . . .
</BODY></HTML>

Notes

No attributes are required by the HTML tag.

The HTML tag at the top and bottom of every document is simply the unique identifier that tells browsers the file type.

The only tag that may precede HTML tag is !DOCTYPE.

Compatibility

Supported and required by every browser.

The Title attribute is supported by MSHTML. It probably should be avoided for compatibility.

In HTML 4, the HTML tag is optional. The tag is highly recommended for backward compatibility, because some browsers use the tag to identify the file type.

MSHTML Attributes

Lang, Title

HTML 4 Attributes

Dir, Lang

  Related Topics

  Style Topics


I tag
 I, /I

Display text in italics; 2.0

The I tag formats text in italics.

Example

<P>If Cheddar and Swiss had a child, would it be <I>gruyere?</I></P>

If Cheddar and Swiss had a child, would it be gruyere?

Notes

To emphasize text and give the browser a chance at portable formatting, try the EM tag.

Avoid tagging long passages of text with I, because italic text is difficult and slow to read when presented in long paragraphs.

Always be sure to use /I after I, and before using other text formatting tags. See the B tag Notes section for more information.

Compatibility

The I tag is supported by the HTML 2.0 specification.

Not all browsers are able to display italic text. Text mode browsers may substitute a color for italic, or may not be able to render any emphasized text elements differently than default text.

Attributes are supported by MSHTML.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


IFRAME is supported only by MSHTML.


IFRAME tag
 IFRAME, /IFRAME

Define a floating frame; IE3, 3.2

The IFRAME tag creates a floating frame—a window that displays another HTML document—within the active document window.

Attributes

Align =	Specify the position of the frame on the page. Options include ABSBOTTOM, ABSMIDDLE, BASELINE, BOTTOM, LEFT, MIDDLE, RIGHT, and TEXTTOP. Optional.

FrameBorder = n	Describes the frame border:

1	Draw a 3-D border around the frame. This is the default.

0	Display no border.

Height = n	Height of the floating frame in pixels or percentage of screen height.

MarginHeight = pixels	Amount of space separating the top and bottom margins of the frame document from the frame border.

MarginWidth = pixels	Amount of space separating the left and right margins of the frame document from the frame border.

Name =	This attribute is the name of the frame. Use this name to load another document into the floating frame. When A tags use the Target attribute reference a frame, they use this name. The name is case sensitive. Some pre-defined names are reserved: _blank, _parent, _self, and _top.

NoResize	Prevents the user from re-sizing the window. There are no resize handles around the window, so NoResize appears to have no effect.

Scrolling = NO/YES	Don't show scroll bars if the document does not fit within the floating frame. Use this feature with caution, because the document may not fit within the frame if the user has changed the default font size.

Src = url	The name of the document to load into the floating frame. This attribute is required.

Width = n	Width of the floating frame in pixels or percentage of screen width.

Example

<P>Here is our great fudge recipe.

<IFRAME Height = "80" Width = "180" MarginHeight = 2 MarginWidth = 2 Src = "recipe.htm">

See the <A HRef = "recipe.htm">recipe</A>.
</IFRAME>

Here is our great fudge recipe.

Browsers that don't support the IFRAME tag will display this screen:

Here is our great fudge recipe. See the recipe.

Notes

A "Floating frame" is a window within the main document view. We say the window floats because the frame is positioned with surrounding text; if the user scrolls the text or re-sizes the window, the floating frame also moves. In the same way a picture inserted with the IMG tag can flow with the text, so may a floating frame.

In the example above, the document in the frame uses different colors and type; the document displayed within the floating frame can use any formatting. For best performance, we limit the complexity of IFRAME documents.

Text within the floating frame will wrap to fit within the frame. If the document is larger than the Width and Height, the floating frame will have a vertical scroll bar. A horizontal scroll bar is added only if any single object within the frame is too wide for the frame.

The part of the document between IFRAME and /IFRAME tags is ignored when the floating frame is displayed. Text within this section is displayed by browsers that do not support IFRAME. This feature makes it easy to insert a link to the embedded document for early browsers.

The closing /IFRAME tag is required. If you forget the closing tag, part of the main document may not be displayed.

If you are displaying a limited amount of information in the floating frame, consider using a TABLE instead of IFRAME.

If you need a scrolling window, try using TEXTAREA without a way to submit the edited text, to simulate the effect of IFRAME.

It's very easy to get into a mess within a floating frame. If the framed document has an A link to the main document, clicking the anchor loads another copy of the document—with yet another floating frame—within the floating frame. Always use the Target attribute with the A when using IFRAME or FRAME to avoid accidentally nesting frames and floating frames.

Compatibility

Always supply a separate link to the information presented in an IFRAME for browsers that don't support this tag.

While defined by late HTML standards, IFRAME is not supported by Netscape Navigator 4.

Netscape 4 offers the ILAYER tag, which also creates a floating window, but using inline text, not a separate document.

MSHTML Attributes

Border, BorderColor, Class, DataFld, DataSrc, FrameSpacing, HSpace, ID, Lang, Language, NoResize, Style, Title, VSpace, events

HTML 4 Attributes

Align, FrameBorder, Height, LongDesc, MarginHeight, MarginWidth, Name, Scrolling, Src, Width, events

  Related Topics

  Style Topics


Floating Frame Example

Text in this floating frame, created with, IFRAME, is in a separate HTML document. If the user scrolls through the main document, this frame moves with the text around it.


Scroll Bar

This is the scroll bar. The top and bottom arrows scroll through the window Drag the "Thumb" to move through the text.


ILAYER is supported only by Netscape 4. Other browsers may respond unpredictably to this tag.


ILAYER tag
 ILAYER, /ILAYER

Define a floating layer NS4

Netscape's ILAYER tag creates a floating frame, called an "Inflow layer". Text between the ILAYER and /ILAYER tags is displayed as a separate layer.

Attributes

ID = 	The name that identifies the layer.

Left = n	Position of the layer from the left border.

Top = n	Position of the layer from the top border.

Example

<LAYER ID = "Layer2" Top = 200px Left = 240px>
<P>Greetings, pizza fans.
</LAYER>

Notes

Like IFRAME, ILAYER does not cause a line break. To start the layer on a separate line, start a new division with DIV.

The closing /IFRAME tag is required.

Compatibility

ILAYER is not an HTML standard.

  Related Topics

  Style Topics


IMG tag
 IMG

Insert a picture on the page; 2.0

The IMG tag inserts bitmap pictures in the document. Pictures serve two purposes: they illustrate topics, or they are navigational aids.

Attributes

All attributes except Src are optional. If they are omitted, the picture floats as the document is formatted.

Align = position	Pictures are displayed at the current position on the screen. The Align attribute specifies the alignment of the image in relationship to the text around it.

BOTTOM	Text that follows is aligned with the bottom of the picture.

LEFT	The picture is shown on the left margin. Following text wraps around the right side of the picture.

MIDDLE	Text that follows is aligned with the middle of the picture. Useful to align headlines next to pictures.

RIGHT 	The picture is shown on the right margin. Following text wraps around the left side of the picture.

TOP	Text that follows is aligned with the top of the picture.

Alt = text	Text to display when pictures are disabled. When you move the mouse over the picture, Late-model browsers display the Alt text as a pop-up Help tip.

Border = pixels	Most browsers do not draw a border around the image unless it is a hyper-link. Hyper-link picture borders are in the document's hyper-link text color. Suppress the hyper-link border by specifying Border=0.

Controls	Tells the browser to display control buttons if a video clip is being displayed. MSHTML only.

DynSrc = url	Specify the URL of the video clip or VRML image to display. MSHTML only.

Height = pixels	The height of the picture.

HSpace = pixels	Extra horizontal space to leave.

IsMap	Identify the picture as a server-side image map.

LowSrc = url	Large pictures may takes a long time to retrieve and display. The LowSrc attribute gives the browser the option to specify a low-resolution picture to quickly display while the high-resolution picture is downloaded. Be sure to use the Height and Width attributes to ensure that the low-resolution picture is scaled correctly.

NaturalSizeFlag = n

Src = url	Specify the picture file name. Virtually all browsers support GIF and JPG file formats.

Start = start-event	Used with DynSrc to specify how the video object should be displayed. MSHTML only.

FILEOPEN	Play the object as soon as the file has loaded. This is the default.

MOUSEOVER	Play the object when the user moves the mouse pointer over the animation.

UseMap = url	Specify the location of an image map. The image map can be created with the MAP tag, within the same document.

VSpace = pixels	Extra vertical space to leave.

Width = pixels	The width of the picture.

Examples

<P>Click the Esquilax <A HRef = "#About"><IMG Src = "esquilax.gif" Width = 27 Height = 22 Alt = "Our Logo" Border = 0></A> for more information.

Click the Esquilax [image] for more information.

Scale a picture using the Width and Height attributes. This example creates a simple bar chart by scaling the width of a picture, while keeping the height constant. This technique requires a late-model browser; always add Alt attributes and descriptive text to make the purpose of the illustration clear.

<P>
<IMG Src = "bar.gif" Height = 11 Width = 28 Alt = "28"> 28<BR>
<IMG Src = "bar.gif" Height = 11 Width = 44 Alt = "44"> 44<BR>
<IMG Src = "bar.gif" Height = 11 Width = 34 Alt = "34"> 34</P>

Notes

When images are used in hyper-links, the pictures have borders in the same color as links. Use Border=0 to turn off this feature. If the border is turned off, the border color cannot be used to distinguish between new and visited links.

When a picture is not a link, the Border attribute is unnecessary.

You can define multiple hot-spots within a single image with the AREA and MAP tags, then use the IMG UseMap attribute to reference the hot-spot map.

Pictures lead the reader's eye to the subject and add visual interest. Pictures take a lot of the Internet's limited bandwidth. When practical, use other tags to change FONT formatting, or add a colorful TABLE instead of filling a page with pictures that simply emulate attractive text.

PNG is a recently-released picture file type, combining the compression of JPG and the image quality of GIF files. While a developing standard, PNG is not supported by many browsers. Many browsers offer the ability to add support for new file types, so PNG files may quickly gain acceptance.

You can add extra room around a tight picture by specifying the HSpace and VSpace attributes. These attributes work like Border, except that the extra space is in the document's background color, not formatted as a border.

The BR tag Clear attribute ensures that all floating images are displayed and aligned correctly.

The Width and Height attributes give the browser a chance to completely format the page before loading pictures. This eliminates the tendency for browsers to display the page, then have to reformat and redraw the page after it loads the pictures.

Some browsers support other values for the Align attribute. ABSBOTTOM aligns the bottom of the picture with the bottom of the current text line. ABSMIDDLE aligns the middle of following text with the middle of the picture. BASELINE aligns text with the bottom of the picture.

When you want two or more pictures to butt-together on a line, be sure to place the tags on one single line. The HTML standard calls for end of line markers (carriage return, linefeed, or both) to be treated as word delimiters, which causes a space to be inserted between pictures if they are defined on separate lines.

Compatibility

Early browsers ignore the Border=0 attribute; this means every picture that is a link will have an ugly blue box drawn around it (so much for aesthetics).

If you set Width or Height larger than the image size, late Netscape browsers will scale the picture. Other browsers will have trouble or will leave gaps around the picture. It is best to specify the image size accurately.

If you set just Width or Height, but not both, Netscape and MSHTML will scale the picture proportionately. For example, if the picture is 20x40 pixels and you set Width=30, which is a 50-percent enlargement, the browser will automatically enlarge the height by 50-percent, to Height=60.

Netscape 4, and Internet Explorer 3.0 and later, display Alt text as floating tips, regardless of if pictures are displayed or ignored.

Most browsers support GIF and JPG pictures. Internet Explorer also supports BMP files. Netscape 4 also supports XPM and XBM.

While most browsers can display GIF bitmap picture files, many cannot animate multiple-image animated pictures. Make sure the first picture in the animation sequence conveys enough of the image to stand-alone, because that's all many viewers will see.

While the Alt attribute is always recommended for IMG, keep the text short—just a few descriptive words. Some browsers extend the size of the picture frame to fit the if pictures are turned-off.

MSHTML Attributes

Class, DataFld, DataSrc, ID, Lang, Language, Loop, Name, Start, Style, Title, VRML, events

Netscape 4 Attributes

OnAbort, OnError, OnLoad

HTML 4 Attributes

Align, Alt, Border, Class, Dir, Height, HSpace, ID, LongDesc, IsMap, Lang, Src, Style, Title, UseMap, VSpace, Width, events

  Related Topics

  Style Topics


IMGSCALE.SHG

###### 28               IMG.1
######## 44           IMG.2
###### 34               IMG.3


<IMG Src = "bar.gif" Height = 11 Width = 28 Alt = "28"> 28<BR>


<IMG Src = "bar.gif" Height = 11 Width = 44 Alt = "44"> 44<BR>


<IMG Src = "bar.gif" Height = 11 Width = 34 Alt = "34"> 34


INPUT tag
 INPUT

Define an input box on the page; 2.0

The INPUT tag creates a single-line input box, check box, or button, for use in a form. INPUT is used with FORM and TEXTAREA to create sophisticated, multiple-part input screens.

Attributes

Align = position	Input boxes are displayed at the current position on the screen. The Align attribute specifies the alignment of the box in relationship to the text around it.

BOTTOM	Text that follows is aligned with the bottom of the box.

LEFT	The input box is shown on the left margin. Following text wraps around the right side.

MIDDLE	Text that follows is aligned with the middle of the box. Useful to align headlines next to boxes.

RIGHT 	The input box is shown on the right margin. Following text wraps around the left side of the box.

TOP	Text that follows is aligned with the top of the box.

Checked	If the INPUT item is a check box ( [image]) or radio button ( [image]), adding Checked sets the default state of the box to checked.

MaxLength = n	Maximum number of characters that can be entered into a text box. If MaxLength is greater than Size, text in the box may scroll horizontally.

Name =	The unique name of the control.

Size =	Width of the input box, in characters. Some browsers use proportional characters, so Size is approximate.

Src = url	If Type is IMAGE, the Src attribute specifies the picture file.

TabIndex =	If there are multiple input areas in the document, use TabIndex to change the Tab order. TabIndex is not always supported; the Tab order is determined by the order objects are defined in the document.

Type =	Specify the type of input object.

CHECKBOX	 or [image] Check boxes return Boolean results: either true or false. Any number of check boxes may be selected in the form; use radio buttons if only one item can be selected.

FILE	Netscape and MSHTML only.

HIDDEN	The edit object is hidden; nothing is displayed. The Value is submitted with the completed form.

IMAGE	Used with the Src attribute, IMAGE is an alternate way to submit a form. The picture replaces the SUBMIT button, but the purpose is the same. When the user clicks on the picture, the form is submitted.

PASSWORD	 The PASSWORD input box is a text box that displays "*" characters instead of text in the string.

RADIO	 or [image] Only one radio button in the group can be selected; selecting one de-selects the others. Specify a group of radio buttons by giving all the same Name, but different Value settings.

RESET	 Clicking this button resets all fields in the form to their original values. Use the Value attribute to change the name of this button.

SUBMIT	 Clicking this button submits the form. Use the Value attribute to change the name of this button.

TEXT	If Type is not specified, the default is a text box.

TEXTAREA	This option turns INPUT into a multiple-line input box. The implementation of this Type is not always complete; use the TEXTAREA tag instead.

Value = text	Default value of the control. If a text or number field, Value is the default string. If a button

Example

<FORM Action = "url" Method = POST>

<P>Filling:<BR>
 <INPUT Type = "RADIO" Name = "Fill" Value = "1">Peanut Butter<BR>
 <INPUT Type = "RADIO" Name = "Fill" Value = "2" Checked>Chocolate<BR>
 <INPUT Type = "RADIO" Name = "Fill" Value = "3">Marzipan

</FORM></P>

Filling:
  Peanut Butter
  Chocolate
  Marzipan

The next example uses an input box and multiple check boxes:

<FORM ACTION = "url" Method = POST>
<P>Select Flavor
<INPUT Type = "TEXT" Name = "Flavor" Size = 14 Value = "Chocolate">

<P>With:<BR>
 <INPUT Type = "CHECKBOX" Name = "Jimmies" Value = "1"> Jimmies<BR>
 <INPUT Type = "CHECKBOX" Name = "Nuts" Value = "1" Checked> Nuts<BR>
 <INPUT Type = "CHECKBOX" Name = "Cherries" Value = "1"> Cherries<BR>

<INPUT Type = "SUBMIT">
</FORM></P>

Select Flavor

With:
 Jimmies
 Nuts
 Cherries

Notes

HTML text and paragraph formatting tags are allowed within forms. FONT changes do not affect the appearance of text within input boxes.

The size of the text may not scale correctly when the user changes screen resolution. Make sure the Size settings are large enough to keep data from being truncated.

Most browsers ignore FONT settings within INPUT boxes.

If you need multiple lines of data, you can use several INPUT boxes. For longer, free-form data in multiple rows, try TEXTAREA.

Use SELECT to allow the user to select an item from a long list.

Use TEXTAREA to create multiple-line input boxes.

While TEXTAREA requires a start and end tag, INPUT requires only one tag.

Compatibility

If you reload the document, Netscape does not restore the original Value text.

When testing your documents during development, be sure you have backup copies saved. Some browsers are sensitive to errors in forms, and may crash when the document is reloaded.

MSHTML Attributes

AccessKey, Class, DataFld, DataSrc, Disabled, ID, Lang, Language, ReadOnly, Style, TabIndex, Title, events

Netscape 4 Attributes

OnClick

HTML 4 Attributes

Accept, AccessKey, Align, Alt, Checked, Class, Dir, Disabled, ID, Lang, MaxLength, Name, OnBlur, OnChange, OnFocus, OnSelect, ReadOnly, Size, Src, Style, TabIndex, Title, Type, UseMap, Value, events

  Related Topics


INS is a new tag, not widely supported.


INS tag
 INS, /INS

Mark text additions; 4.0

The DEL and INS tags mark amendments to a document, such as a license, design, or legal document. These tags are annotations; they may not alter the appearance of a document.

Example

<INS Cite = "rev2.txt" DateTime = "1998-09-04T20:45:00-07:00"> Amendments to the terms of this agreement are made in accordance with the amended terms of this agreement.</INS>

Amendments to the terms of this agreement are made in accordance with the amended terms of this agreement.

Notes

In some implementations, text marked with DEL or INS may be displayed or hidden.

The DateTime string tells the browser the date and time the change was made. The text must be in the format "YYYY-MM-DDThh:mm:ssTZD". Here are the meanings of the DateTime fields:

YYYY	Four-digit year as a number.

MM	Two-digit month. January is 01, February is 02, and so forth.

DD	Two-digit day of the month from 01 through 31.

T	Literal character, marks the beginning of the time field.

hh	Two-digit hour 00-23, in 24-hour format.

mm	Two-digit minutes 00-59.

ss	Two-digit seconds 00-59.

TDZ	Time zone. "z" indicates UTC (Coordinated Universal Time). Use an offset-time relative to UTC for other time zones. For instance "-08:00" if the local time is 8 hours behind UTC.

Compatibility

DEL and INS are new tags, supported by few browsers. Any text marked with either tag will be displayed normally, without any special formatting.

HTML 4 Attributes

Cite, Class, DateTime, Dir, ID, Lang, Style, Title, events

  Related Topics


ISINDEX tag
 ISINDEX

Mark an index for search engines; 2.0

The ISINDEX tag is a simple type of INPUT that prompts the reader for information, such as search keywords, then returns the data.

Attributes

Action = url	Describes the URL that is to receive the information.

Prompt = text	This text is displayed to the left of the input box. Optional. Netscape only.

Example

<HTML><HEAD><TITLE>Search Box</TITLE></HEAD>
<BODY>
<P>Welcome to my search engine. Enter a topic to find.
<ISINDEX Action = "http://www.search_engine" Prompt = "Search for: ">Thank you for visiting.
</BODY></HTML>

Welcome to my search engine. Enter a topic to find.
————————————————
Search for:
————————————————
Thank you for visiting.

Notes

After the reader enters the text, the information is returned to the specified URL. If, for instance, the user types "gouda" in the input box, the URL will have "?gouda" appended to the end. Multiple keywords may be separated by plus characters, such as "?gouda+gruyere".

Be sure to add a space at the end of the Prompt string, to separate the text from the input box.

You can use multiple ISINDEX tags on a page, and users can press TAB or SHIFT+TAB to move between input boxes. Results will be sent to the URL specified in the input box that contains the flashing cursor.

Compatibility

The Prompt attribute is not supported by Internet Explorer. Results are not predictable with all browsers; Prompt is best avoided.

NCSA Mosaic displays the input box in a separate window, not with the body of the document.

HTML 4.0 recommends using INPUT instead of ISINDEX.

HTML 4 Attributes

Class, Dir, ID, Lang, Prompt, Style, Title

  Related Topics

  Style Topics


KBD tag
 KBD, /KBD

Display text in fixed-pitch, bold type; 2.0

The KBD tag formats text elements in emphasized, fixed-pitch, typically representing a keystroke.

Example

<P>Press the <KBD>ENTER</KBD> key to accept the selection, or <KBD>ESC</KBD> to cancel the procedure.

Press the ENTER key to accept the selection, or ESC to cancel the procedure.

Notes

For a lighter fixed-pitch font, try the CODE tag.

Compatibility

Attributes are supported by MSHTML.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


KEYGEN is supported only by Netscape 4. Other browsers may respond unpredictably to this tag.


KEYGEN tag
 KEYGEN

Public key encryption NS4

The KEYGEN tag is used within a FORM to provide public key encryption. Used with web-based certificate management systems.

Attributes

Challenge =	The challenge string that will be packaged with the public key. If the Challenge attribute is missing, a null string is used.

Name =	The name of the public/private key pair. The Name is submitted with the form.

Example

<FORM . . .>
<KEYGEN Name = "TheKey" Challenge = "1125983021">
</FORM>

Notes

KEYGEN displays a menu of key-size choices, then creates a public and private key to be used with encryption. The public key is submitted with the form, the private key is stored on the local computer.

Compatibility

KEYGEN is not an HTML standard. Supported by Netscape 4.

  Related Topics


LABEL tag
 LABEL, /LABEL

Define control label; IE4, 4.0

Used with event-driven pages, the LABEL tag defines a label for a form control.

Attributes

For =	Associate this label with another control. Must refer to another control within the same document.

ID = name	Define a name for the LABEL.

Title =	Specifies advisory information about the element.

Example

<FORM Action = "mailto:url" Method = "post">
<LABEL For = "Flavor">Flavor: </LABEL>

<INPUT Type = "text" Name = "Flavor" Size = "24,1" MaxLength = 200>
<BR></FORM>

Flavor:

Notes

The LABEL tag is often used to define a label within a FORM.

Compare LABEL to LEGEND.

Compatibility

Part of the HTML 4 standard; not supported by most browsers.

Supported by MSHTML.

MSHTML Attributes

AccessKey, Class, Lang, Language, Style, events

HTML 4 Attributes

AccessKey, Class, Dir, Disabled, For, ID, Lang, OnBlur, OnFocus, Style, Title, events

  Related Topics

  Style Topics


LAYER is supported only by Netscape 4. Other browsers may respond unpredictably to this tag.


LAYER tag
 LAYER, /LAYER

Define an overlapping layer NS4

The LAYER tag creates overlapping document layers.

Attributes

Above = Layer	The name of the layer on top of this layer. Do not use with Below or Z-Index.

Below = Layer	The name of the layer beneath this layer. Do not use with Above or Z-Index.

Clip = "n, n, n, n"	The clipping (viewable) area of the layer, in pixels. The clipping area is equal to or smaller than the dimensions of the layer.

Height =	Height of the layer in pixels or percentage of the width of the surrounding document layer.

ID = Layer	The name of this layer. Used to reference this layer by other layers or JavaScript.

Left = n	Horizontal position of this layer. Either an absolute position or relative to positions of other layers.

PageX = n	Horizontal position of the layer within the document window.

PageY = n	Vertical position of the layer within the document window.

Src = url	The name of the document to load into the layer. This attribute is required.

Top = n	Vertical position of this layer. Either an absolute position or relative to positions of other layers.

Width = n	Width of the layer in pixels or percentage of the width of the surrounding document layer.

Z-Index = n	The layer stacking order. Higher numbered layers are on the top of the stack. Do not use with Above or Below.

Example

<P>The main document is here

<LAYER ID = Layer1 Top = 60 Left = 120 Src = "layered.htm">
<P>This paragraph is within Layer1
</LAYER>

Notes

Use only one of Above, Below, and Z-Index.

Use NOLAYER to provide alternate content for browsers that do not support layers.

Layers are similar to floating frames, created with the IFRAME tag.

Compatibility

LAYER is not an HTML standard.

  Related Topics

  Style Topics


LEGEND is a new HTML 4 tag, rarely supported.


LEGEND tag
 LEGEND, /LEGEND

Assign a caption to a FIELDSET; 4.0

The LEGEND tag creates a label for a group of INPUT tag in a form. The FIELDSET tag is used to group multiple INPUT tags into a related group.

FIELDSET and LEGEND are new tags, not supported by most current browsers.

Compatibility

Part of the HTML 4 specification. Not supported by Netscape 3 or early releases of Internet Explorer 4.

MSHTML Attributes

Align, Class, ID, Lang, Language, Style Title, VAlign, events

HTML 4 Attributes

AccessKey, Align, Class, Dir, ID, Lang, Style, Title, events

  Related Topics


LH is rarely supported by browsers.


LH tag
 LH, /LH

?

Attributes

Class =

Dir =

LTR

RTL

Lang =

Compatibility

The LH tag is not commonly supported.

  Related Topics


LI tag
 LI

Tag an item in a list; 2.0

The LI (List Item) tag starts a new item in a list that was created by DIR, MENU, OL or UL. Begin the list with the UL tag to create a simple bulleted list; use OL for a numbered list.

Examples

<UL Type ="SQUARE">Types of Chocolate<BR>
<LI>Dark
<LI>Milk
<LI>White
<LI>Gooey
</UL>

  Types of Chocolate
    Dark
    Milk
    White
    Gooey

<OL Type = "1">Types of Chocolate<BR>
<LI>Dark
<LI>Milk
<LI>White
<LI>Gooey
</OL>

  Types of Chocolate
  1  Dark
  2  Milk
  3  White
  4  Gooey

Notes

Most often we use simple bulleted lists, created with the UL (unordered list) tag.

Internet Explorer allows the Type to be used with LI to change the list type without starting a new list. The Type and Value attributes are used with ordered lists and the OL tag.

/LI tag at the end of each list item is optional and unnecessary.

Browsers usually display minimal between list items. Try adding /P at the end of each list item to add extra space between items.

Some recommend using LI outside of a UL block to create a bulleted item that is not indented. This technique works correctly only in MSHTML. Opera indents all following paragraphs if you do not add /LI to each item. Netscape indents all paragraphs that follow, and Mosaic doesn't like it at all.

Compatibility

Supported by everybody.

MSHTML Attributes

Align, Class, ID, Lang, Language, Style, Title, Value, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, Type, Value, events

  Related Topics

  Style Topics


LINK tag
 LINK

Define a link between documents; IE3, 4.0

Used with a group of related documents, like chapters in a book, the LINK tag defines the logical order of documents.

Attributes

HRef = url	Specifies the document name referenced by the LINK.

HRefLang = "language"	When used with a link to a document in another language, specify the two-character language name abbreviation.

Rel = text	Defines the relationship between documents. This is the text the browser may display if it creates buttons for your links. This attribute is required when HRef is used.

Rev =	Like Rel, describes relationships. However, Rev describes a reverse-relationship.

Src = url	If the Type requires an external object, such as a picture, the Src attribute is the URL of that file. Used only if required by Type.

Title = text	Provides advisory information.

Type =	If the link is displayed, Type describes the appearance of the object. Possible values include button, checkbox, file, hidden, image, password, radio, reset, submit, text. Type is optional.

Example

<HTML><HEAD><TITLE>LINK Example</TITLE>
<LINK Rel = "Index" HRef = "index.htm">
<LINK Rel = "Previous" HRef = "chapter1.htm">
<LINK Rel = "Next" HRef = "chapter3.htm">
</HEAD><BODY>

<P><A HRef = "chapter1.htm">Previous</A> <A HRef = "chapter3.htm">Next</A>

Notes

Primarily useful for browsers, LINK may make it easier for the browser to locate related documents. Nothing is usually displayed by the LINK tag; you will still have to use A (anchor) tags to give the user a way to jump to related documents.

The LINK tag may only appear within the HEAD section.

We use STYLE to include style sheets; you can also use LINK to reference style sheets and other documents:

<LINK Rel = "STYLESHEET" HRef = "styles.css" Type = "text/css">

This LINK example references a separate SCRIPT document.

<LINK Rel = "STYLESHEET" HRef = "java.htm" Type = "text/JavaScript">

Compatibility

Ignored by most browsers.

MSHTML Attributes

Disabled, ID, Methods, Name, Target, URN

HTML 4 Attributes

CharSet, Class, Dir, HRef, ID, Lang, Media, Rel, Rev, Style, Target, Title, Type, events

  Related Topics

  Style Topics


LISTING is deprecated in HTML 4. Use PRE.


LISTING tag
 LISTING, /LISTING

Display text in fixed-pitch type; 2.0

The LISTING tag displays one or more lines of text in the standard fixed-pitch font. LISTING is often used in programming and owner's manuals to show examples.

Example

<P>The following Basic program beeps the speaker three times:
<LISTING>
FOR x% = 1 to 3
   PRINT CHR$(7)
NEXT x%
</LISTING>

The following Basic program beeps the speaker three times:

FOR x% = 1 to 3
   PRINT CHR$(7)
NEXT x%

Notes

Any additional tags within LISTING blocks are interpreted. You can, for instance, format a portion of a line of code with the B tag for emphasis.

Each line within a LISTING block is assumed to be fixed-width, it does not word-wrap, instead ending at the physical end of each line.

The LISTING tag formats entire lines in fixed-pitch type. To display individual words within paragraphs in fixed-pitch type, use CODE or KBD.

See PLAINTEXT, which does not interpret embedded HTML tags.

Compatibility

Supported by everybody.

The LISTING tag is deprecated in HTML version 4.0; PRE is the recommended replacement.

Netscape and Internet Explorer display text formatted with LISTING in a smaller size than text tagged with PRE or XMP.

Pocket Internet Explorer ignores LISTING.

Attributes are supported by MSHTML and Internet Explorer 4 or later.

MSHTML Attributes

Align, Class, ID, Lang, Language, Style, Title, events

  Related Topics

  Style Topics


MAP tag
 MAP, /MAP

Define mouse-aware hot spots in a picture; 2.0

The MAP tag is used with AREA to define hot spots for client-side image maps.

Attributes

Name = name	The name used within the IMG tag

Example

<MAP Name = "Colors">
<AREA Shape = "RECT" Coords = "5,4,80,39" HRef = "#Red">
<AREA Shape = "RECT" Coords = "39,60,82,86" HRef = "#Green">
<AREA Shape = "RECT" Coords = "100,20,140,70" HRef = "#Blue">
</MAP>

<IMG Src = "menubar.gif" UseMap = "#Colors">

Notes

You can use AREA to define as many hot spots as necessary within the image. It is not necessary to define all of the image as a map.

Don't depend only on pictures for navigation. Always offer a way for text-only browsers to navigate. You may want to offer a text-only page, or add links at the bottom of the page, separated by vertical bars, for clarity.

News | Weather | Sports | Files

Compatibility

Some early browsers do not support image maps. For compatibility, you may want to use an individual picture for each link, and reference each with separate A tags.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, ID, Name, Style, Title, events

  Related Topics

  Style Topics


MARQUEE is supported only by some versions of Internet Explorer and MSHTML.


MARQUEE tag
 MARQUEE, /MARQUEE

Define a scrolling ticker-tape marquee; IE

This Internet Explorer-only tag displays text with special effects in a horizontally-scrolling marquee.

Attributes

Align =	Specify how surrounding text aligns with the marquee.

BOTTOM	Text aligns with the bottom of the marquee.

MIDDLE	Text aligns with the middle of the marquee.

TOP	Text aligns with the top of the marquee.

Behavior =	Describe how the text moves:

ALTERNATE	Bounce left and right between the margins.

SCROLL	Start off-screen, scroll onto the screen and then completely off the other side. This is the default movement.

SLIDE	Start off one side, scroll

BGColor = color	 Specify the background color within the marquee margins.

Direction =	Specify scroll direction.

LEFT	Scroll from left to right. This is the default.

RIGHT	Scroll from right to left.

Height = n	Height of the marquee. Specify the number of pixels or a percentage of the screen height.

HSpace = n	Extra space left blank outside the left and right margins.

Loop = n	Number of times to repeat the text movement. If Loop is not specified, the text moves continuously.

ScrollAmount = n	Number of pixels to move text for each movement.

ScrollDelay = n	Number of milliseconds between each movement. A millisecond is 1/1000 of a second. Experiment: for fast movement try 20; for a slow scroll try 500.

VSpace = n	Number of pixels to leave as top and bottom margins

Width = n	Width of the marquee. Specify the number of pixels or a percentage of the screen width.

Example

In this example, the scrolling window has a yellow background, and blue text bounces left and right.

Here is some
<FONT Color="#0000FF" Size = 4>

<MARQUEE Width = "40%" VSpace = 2 Behavior = "ALTERNATE" ScrollDelay = 10 ScrollAmount = 3 BGColor = "#FFFF00">

Dizzy Text
</MARQUEE></FONT>

Here is some

Here is the same example displayed in a browser that doesn't support MARQUEE:

Here is some Dizzy Text

Notes

MARQUEE does not start a new paragraph.

The MARQUEE tag cannot change the type style. Use other tags outside of the marquee to change FONT or make the text bold (B).

Like Netscape's BLINK, avoid overusing MSHTML/Internet Explorer's MARQUEE. Text effects can be distracting—and they may encourage the reader to leave your page

Compatibility

MARQUEE is only supported by MSHTML and Internet Explorer 3.0 or later. Other browsers ignore the tags, seeing only the plain text.

MSHTML Attributes

Class, DataFld, DataFormatAs, DataSrc, ID, Lang, Language, Style, Title, TrueSpeed, events

  Related Topics

  Style Topics


MARQUEE Tag Sample

The text moves back and forth, between the left and right margins.


MENU is deprecated in HTML 4. Use UL.


MENU tag
 MENU, /MENU

Define a menu-style list; 2.0

The MENU tag creates a bulleted list; in most browsers, formatting is identical to lists created with UL.

Attributes

Type = type	Change the appearance of the bullet displayed at the beginning of each line. Netscape only. Three bullet shapes are supported:

CIRCLE	 A hollow round bullet.

DISC	 A solid color round bullet. This is the default Netscape bullet.

SQUARE	 A solid color square bullet.

Example

<P>Features include:
<MENU>
<LI>Taste
<LI>Texture
<LI>Color
</MENU>

  Features include:
      Taste
      Texture
      Color

Notes

The MENU tag does not create menus; not in the computer meaning, anyway.

Compatibility

Most browsers format the menu with leading bullets. Some early browsers format one item per line in a simple list, without bullets.

In Netscape and Internet Explorer, MENU works exactly like DIR and UL. For this reason, MENU is deprecated in HTML 4; the recommended replacement is UL.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Compact, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


META tag
 META

Define information for browsers and search engines; 3.2

META tags provide a broad range of services. When used with the HTTP-Equiv attribute, they describe the document to the browser and they describe the document content to Internet search engines. They provide services like timed jumping to other documents.

Attributes

Content =	Defines the information that applies to the META tag. This is where we enter commands and descriptions.

HTTP-Equiv =	Used instead of Name by several browsers for HTTP response message headers.

Content-Type	Describes the character set used by the document.

EXPIRES

KEYWORDS	Words found in the document. Used by search engines.

REFRESH	The string passed to REFRESH contains the number of seconds to delay before the browser reloads the document. You can tell the browser to load another document by specifying the URL within the string. The first value in the string is the number of seconds to delay. The second argument, following a semicolon, is the URL of the document to load. If no document is specified, the current document is reloaded.

REPLY-TO

Name =	Like HTTP-Equiv, Name identifies the Content.

ROBOTS	Applicable options include The Content may include ALL, INDEX, NOFOLLOW, and NOINDEX.

Scheme =	A scheme that is used to interpret the property value.

Example

These are the most useful META tags. The Description is used by search engines when they list information about our documents. Keywords tell search engines special words users may find in our documents.

<META Name = "Description" Content = "HTMLcat home page. A reference of HTML tags, styles, and compatibility.">

<META Http-Equiv = "Keywords" Content = "browser, catalog, Harvey, help, HTML, HTMLcat, HTML cat, Internet, reference, r_harvey, style, tags, tutorial, web">

Notes

The META tag is one of those features some find vitally important, that others ignore altogether. A document can contain several META tags, or none at all, depending on the application. Most modern documents contain Description and Keywords META commands, as shown in the example above.

The tag is a general method to describe document properties to browsers, servers, and search engines. In many cases, we can substitute a LINK tag for META.

A wonderful use of the HTTP-Equiv attribute is with the REFRESH value. With this attribute, you can force the document to reload periodically, or jump to another page after a predetermined delay (client-pull). If a page has moved, we use REFRESH to immediately jump to the new page; not all browsers support this feature, so we must also include a hyper-link the user can select if necessary. This small example is a forwarding address to leave behind when we move:

<HTML><HEAD><TITLE>We have moved!</TITLE>
<META HTTP-Equiv = "REFRESH" Content = "0;URL=newfile.htm">
</HEAD><BODY>
<P>Select <A HRef = "newfile.htm">new file</A> to move to our new home.
</BODY></HTML>

Many recommend using the REFRESH value with a short delay before passing control to another page. If you are trying to tell the reader that the page has moved, this may be helpful. However, if the link doesn't change, such as including files named contents.htm and homepage.htm that always jump to index.htm, any delay at all is annoying. You may want to eliminate this META tag, and simply make contents.htm and homepage.htm identical to index.htm.

See the Notes section in BASE for a way to use META to eliminate unwanted frames.

The uncommon REDIRECT tag is also used like the META tag REFRESH value.

Compatibility

The HTML standard does not define all possible document properties. Commonly found properties include Author-Corporate, Content-Language, Coverage, Date-Conversion-yyymmdd, Date-Creation-yyyymmdd, Date-Revision-yyyymmdd, Description, Identifier-url, Keywords, Publisher, Publisher-Email.

MSHTML Attributes

ID, Title, URL

HTML 4 Attributes

Content, Dir, HTTP-Equiv, Lang, Name, Scheme

  Related Topics

  Style Topics


MULTICOL is supported only by Netscape.


MULTICOL tag
 MULTICOL, /MULTICOL

Define a multiple-column document; NS

The MULTICOL tag tells the browser to format text in multiple columns. Text is automatically formatted to provide equal-length columns.

Attributes

Cols =	The number of columns to display.

Gutter = n	Specify the amount of vertical space between columns. If not specified, column spacing is approximately 10 pixels.

Width = n	The width of all columns combined, in pixels or percentage of screen width. Avoid hard-coding column width.

Example

<H3>Down the Rabbit-Hole</H3>
<MULTICOL Cols = "3" Gutter = "20">

<P><B>Alice was beginning to get very tired</B> of sitting by her sister on the bank, . . .</P>

<P>So she was considering in her own mind . . .</P>
</MULTICOL>

Down the Rabbit-Hole
Alice was beginning to	book,' thought Alice	making a daisy-chain
get very tired of sitting	'without pictures or	would be worth the
by her sister on the bank,	conversation?'	trouble of getting up and
and of having nothing to	 	picking the daisies, when
do: once or twice she	So she was considering	suddenly a White Rabbit
had peeped into the book	in her own mind (as well	with pink eyes ran close
her sister was reading,	as she could, for the hot	by her.
but it had no pictures or	day made her feel very
conversations in it, 'and	sleepy and stupid),
what is the use of a	whether the pleasure of

Notes

MULTICOL is similar to a table without borders. Most formatting tags are allowed within a MULTICOL section

While you can't specify the column breaks, you can specify the spacing between columns. Use a Gutter value of at least 16 pixels (which is about two spaces).

While MULTICOL sections can contain multiple paragraphs, there is no widow/orphan control. A The first line of a paragraph may begin at the bottom of a column, or the last line may be carried-over to the next column. The primary goal of the browser is to display balanced column lengths.

Compatibility

This useful tag is unfortunately Netscape-only. All other browsers ignore MULTICOL, instead formatting text in one wide column. You can use MULTICOL without conflicts, recognizing that many browsers will ignore the special formatting.

Consider using the TABLE tag instead of MULTICOL to create borderless, multiple-column text. The disadvantage of using TABLE is that it requires us to make manual column breaks.

  Related Topics

  Style Topics


NEXTID is unnecessary.


NEXTID tag
 NEXTID

Define next link name ID; IE

The NEXTID tag is used by HTML editors as an aid in creating unique anchor names for use by the A tag.

Attribute

N =	The next available tag. Usually sequentially named. Required.

Example

<NEXTID N = "a0004">

Notes

The NEXTID tag keeps a running-count of used tags. The tag used by programs that automatically create A anchor reference tags. The anchors are in serial-number format; if the last anchor used is "X000001", the next available anchor is "X000002".

Compatibility

Not part of the HTML standard; using NEXTID is not recommended. Ignored by virtually all browsers.

  Related Topics


NOBR tag
 NOBR, /NOBR

Display text on one line without word-wrapping; NS, IE

The NOBR tag tells the browser to format a line of text all on one line, without word-wrapping. Text appears truncated, and clicking a horizontal scroll bar displays the rest of the line.

Example

<P>Visit our home page at
<NOBR>http://ourworld.compuserve.com/homepages/r_harvey
</NOBR> for the latest information.

Notes

The NOBR tag is often used to specify format-critical information, such as a program command line description or a URL, to display without confusion. In some instances, the reader can become confused if an example represents one statement that has wrapped to a second line, or a separate statement.

NOBR does not start a new paragraph.

All text within the NOBR section is displayed on a single line, even if it is written on several lines in the source document.

Use the WBR tag to allow the browser to split the line if necessary.

Compatibility

Supported by Netscape and Internet Explorer. Not supported by Mosaic or other browsers. For compatibility, NOBR is probably best avoided.

Attributes are supported by MSHTML and Internet Explorer 4 or later.

MSHTML Attributes

ID, Style, Title

  Related Topics

  Style Topics


NOEMBED is supported only by Netscape 4. Other browsers may respond unpredictably to this tag.


NOEMBED tag
 NOEMBED, /NOEMBED

Define text for browsers that don't support plug-ins NS4

The NOEMBED tag is used to create documents for browsers that do not support the EMBED tag or embedded objects.

Example

<EMBED Src = "chocolate.avi">

<NOEMBED>The history of chocolate video is not available!</NOEMBED>

Notes

You can use a SCRIPT to determine browser capabilities, or simply use the EMBED tag, and let the browser ignore it if the feature is not supported..

Compatibility

Browsers that support EMBED, but do not support NOEMBED will display the object as well as the text within the NOEMBED section.

While a good idea, NOEMBED is not part of the HTML standard. Supported only by Netscape 4.

  Related Topics


NOFRAMES tag
 NOFRAMES, /NOFRAMES

Define document for browsers that don't support frames; 3.2

The NOFRAMES tag is used to create documents for browsers that do not support frames. You can use FRAMESET within the page to create the frames, then a separate NOFRAMES section for older browsers.

Example

<HTML><HEAD><TITLE>Main frame</TITLE></HEAD>
<FRAMESET . . .>
<FRAME . . .>
</FRAMESET>

<NOFRAMES>
<META HTTP-Equiv = "REFRESH" Content = "0;URL=plain.htm">
<BODY>
<P>Sorry, this page requires a browser that supports frames. Please select <A HRef = "plain.htm">No frames</A> to view the non-frame page.
</BODY></NOFRAMES></HTML>

The example also uses the META tag to automatically load the non-frames document; if the browser does not support META, it displays an alternate message.

Notes

Browsers that support frames ignore everything between the NOFRAMES and /NOFRAMES tags; on the other hand, browsers that do not support frames ignore everything except what is in the NOFRAMES section. In this way, you can create two documents in one: one that defines the frames, and a second for simple browsers.

You can place both the frame and non-frame versions in the same file, but for performance and maintenance, it is probably better to determine the browser type, and place both versions in separate files. It is possible to use the same documents with and without frames; see A for information about the Target = "_top" attribute. Always use the Target attribute with A when a document may be shared with frame- and non-frame browsers.

Compatibility

Recommended for all documents that use frames.

MSHTML Attributes

ID, Style, Title

  Related Topics

  Style Topics


NOLAYER is supported only by Netscape 4. Other browsers may respond unpredictably to this tag.


NOLAYER tag
 NOLAYER, /NOLAYER

Define document for browsers that do not support layers; NS4

The NOLAYER tag is used to create documents for browsers that do not support the LAYER tag.

Example

<P>The main document is here

<LAYER ID = Layer1 Top = 60 Left = 120 = "layered.htm">
<P>This paragraph is within Layer1
</LAYER>

<NOLAYER>
<P>Jump to the <A HRef = "layered.htm">layered document</A>.
</NOLAYER>

Notes

If you use layers, always add a NOLAYER section to your document to provide alternate content for browsers that do not support layers.

Compatibility

LAYER and NOLAYER are not HTML standard tags.

  Related Topics

  Style Topics


NOSCRIPT tag
 NOSCRIPT, /NOSCRIPT

Define text for browsers that do not support scripts; 3.2

Scripting languages offer powerful new features for HTML pages. Not all browsers support scripts or the SCRIPT tag to define the functions; for those earlier browsers, we use a NOSCRIPT section to define an alternate way to view the document.

Example

<HTML>
<SCRIPT Language = "JavaScript">
<!-- define the functions here -->
</SCRIPT>

<NOSCRIPT>
<BODY><P>Sorry, this document requires JavaScript.
</BODY></NOSCRIPT>

</HTML>

Notes

Browsers that support scripts ignore everything between the NOSCRIPT and /NOSCRIPT tags; on the other hand, browsers that do not support scripts ignore everything except what is in the NOSCRIPT section. In this way, you can create two documents in one: one that uses scripts, and a second for simple browsers.

If there is a chance the document will be read by earlier browsers, be sure to define script functions within !-- comment tags.

While the NOFRAMES tag is plural, NOSCRIPT is singular. It is easy to accidentally type the tag as "NOSCRIPTS", which may not be caught by testing with some browsers.

Compatibility

Recommended for all documents that contain scripts.

Not all browsers that support scripts will have scripts enabled. When scripts are enabled in Netscape, the NOSCRIPT tagged section is ignored; if scripts are disabled, Netscape reads the NOSCRIPT section.

MSHTML Attributes

Title

  Related Topics


NOTE is rarely supported by browsers.


NOTE tag
 NOTE, /NOTE

?

Attributes

Class =

Clear =

ALL

LEFT

RIGHT

Dir =

LTR

RTL

MD = " "

Src = url

Compatibility

The NOTE tag is not commonly supported.

  Related Topics


OBJECT and PARAM are supported by Internet Explorer, not Netscape. While new HTML 4 tags, they are rarely supported.


OBJECT tag
 OBJECT, /OBJECT

Insert an object on the page; IE3

The OBJECT tag inserts objects (as OLE controls or other mechanisms) that add support for new object types. In much the same way most browsers know how to display familiar picture file formats, OBJECT adds support for new image types using ActiveX. Think of OBJECT as like IMG, but for embedded objects.

Attributes

Align =	Alignment of the object to text. Optional. Valid options are BASELINE, CENTER, LEFT, MIDDLE, RIGHT, TEXTBOTTOM, TEXTMIDDLE, TEXTTOP.

Border = n	Size of the object border, in pixels. Used only if the object is a hyper-link.

ClassID =	This is the unique control string that identifies the object.

CodeBase = url	The object code base. Syntax varies.

CodeType =	The media type.

Data = url	Data required by the object. Syntax depends on the type of object.

Declare	Used to declare the object without instantiating it. The object will be referenced later in the document or within another object.

Height = n	Initial height of the display area. Optional.

HSpace = n	Horizontal space on the screen around the object display area. Optional.

Name =	Identify the name of an Applet to other Applets used in the document. Optional.

Shapes	If present, the object uses shaped hyper-links.

Standby = text	Optional message to display while the object is being loaded.

Type = mime	The Internet media data type (mime).

UseMap =url	Specify the location of an image map. The image map can be created with the MAP tag, within the same document.

VSpace = n	Amount of blank space to leave on the screen above the object rectangle.

Width = n	Width of the object display area.

Example

<OBJECT Type = "image/gif" Data = "logo.gif"></OBJECT>

We can use OBJECT to insert pictures (or other objects), and give browsers that do not support the tag an alternate image to display. This example displays one picture if the browser supports OBJECT, and another if it does not:

<OBJECT Data = "object.gif">
<IMG Src = "alternate.gif">
</OBJECT>

Notes

OBJECT is used with PARAM to render data types not directly supported by the browser.

Much like NOEMBED, NOFRAMES, and NOSCRIPT provide alternate content for browsers that do not support EMBED, FRAME and SCRIPT, text between the OBJECT and closing /OBJECT tags is displayed if the tag is not supported. OBJECT extends the idea farther by allowing alternate objects if a specified object type is not supported. This example displays a PNG picture if the browser supports that file type, then it tries to display a JPG picture, and finally a GIF picture if the other two types of pictures are not supported:

<OBJECT Type = "image/png" Data = "picture.png">
 <OBJECT Type = "image/jpg" Data = "picture.jpg">
  <IMG Src = "picture.gif">
 </OBJECT>
</OBJECT>

Include the MIME Type attribute to help the browser identify the object.

See the documentation furnished with your ActiveX control.

Compatibility

OBJECT is supported by MSHTML and Internet Explorer primarily to communicate with ActiveX controls.

MSHTML Attributes

AccessKey, Class, Code, DataFld, DataSrc, Disabled, ID, Lang, Language, Style, TabIndex, Title, events

HTML 4 Attributes

Align, Archive, Border, Class, ClassID, CodeBase, CodeType, Data, Declare, Dir, Height, HSpace, ID, Lang, Name, Shapes, Standby, Style, TabIndex, Title, Type, UseMap, VSpace, Width, events

  Related Topics

  Style Topics


OL tag
 OL, /OL

Define an ordered list; 2.0

The OL tag defines lists of sequentially-numbered items. The Type attribute tells the browser how to format items in the list. Each item in the ordered list begins with the LI tag.

Attributes

Compact	Reduce spacing between items in the list.

Type = order	The list type is defined with the OL tag. The following values are allowed:

1	Mark list item with numbers, in the format 1, 2, 3... This is the default type of ordered list.

A	Mark list item with large letters. A, B, C...

a	Mark list item with small letters. a, b, c...

I	(upper case "I") Large Roman numerals. I, II, III...

i	(lower case "I") Small Roman numerals. I, ii, iii...

Start = n	Specify the starting number for the first item in the list; the default start is one. Useful when a list is split by other text, so that you can continue the same numbering scheme again. The Start value is not supported by early browsers.

Example

<OL Type = "1" Start = "4">
<LI>Insert candy thermometer.
<LI>Continue stirring.
<LI>Remove from heat when done.
</OL>

 4  Insert candy thermometer.
 5  Continue stirring.
 6  Remove from heat when done.

Notes

A powerful, overlooked feature, OL is a simple way to create numbered lists.

Compatibility

With Internet Explorer only, Type can be used with LI to change the style within the list.

MSHTML Attributes

Align, Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Compact, Dir, ID, Lang, Start, Style, Title, Type, events

  Related Topics

  Style Topics


OPTGROUP is rarely supported by browsers.


OPTGROUP tag
 OPTGROUP, /OPTGROUP

Group options in a form 4.0

The OPTGROUP tag is used in forms to create a group of options.

Attributes

Disabled	This group of options is unavailable.

Label = text	The label for the group of choices.

Example

<FORM Action = "action" Method = "post">
<SELECT Name = "Favorites" Size = 1>

<OPTGROUP Label = "Group1">
  <OPTION Value = 1>Standard
  <OPTION Value = 2>Option
  <OPTION Value = 3>Never
</OPTGROUP><BR>

<OPTGROUP Label = "Group2">
  <OPTION Value = 1>Enhanced
  <OPTION Value = 2>Standard
  <OPTION Value = 3>Lite
</OPTGROUP>

</SELECT>
</FORM>

Notes

All elements used by OPTGROUP must be specified within a SELECT element. Groups must not be nested.

Compatibility

OPTGROUP was documented late in HTML 4.0 development. Rarely supported.

HTML 4 Attributes

Class, Dir, Disabled, ID, Lang, Style, Title, events

  Related Topics


OPTION tag
 OPTION, /OPTION

Define a choice in a list box; 2.0

The OPTION tag creates a single item in a form list that is created with the SELECT tag.

Attributes

Selected	This attribute is present if this item is selected.

Value = n	The optional value to return if this item is selected when the form is submitted.

Example

<P>How do you like celery:

<SELECT Name = "Favorites" Size = 2>
<OPTION Value = 1>Standard
<OPTION Value = 2 Selected>Option
<OPTION Value = 3>Never
</SELECT>

How do you like celery:

Notes

You can have any number of OPTION tags within a SELECT structure. For performance, it's probably best to limit the size of lists and the length of each item.

A FORM may contain several types of input. The primary purpose of SELECT and OPTION is to provide access to many options without filling the screen with lists of data.

Compatibility

HTML 2.0 standard. Always supported, but not always implemented the same.

MSHTML Attributes

Class, ID, OnSelectionChange, OnSelectionStart, Title

HTML 4 Attributes

Class, Dir, Disabled, ID, Lang, OnFocus, OnBlur, OnChange, Selected, Style, Title, Value, events

  Related Topics


<OPTION Value = 2 Selected>Option


Scroll Bar

This is the scroll bar. The top and bottom arrows scroll through the window Drag the "Thumb" to move through the text.


OVERLAY is rarely supported by browsers.


OVERLAY tag
 OVERLAY

?

Attributes

Height = n

ImageMap =

Src = url

Units =

PIXELS

EN

X = n

Y = n

Width = n

Compatibility

The OVERLAY tag is not commonly supported.

  Related Topics


P tag
 P, /P

Start a paragraph; 2.0

Perhaps the most frequently used tag, P separates paragraphs and ensures that there is uniform blank space between paragraphs.

Attributes

Align =	Text is normally displayed left-flush, with a ragged right border. The Align attribute overrides this setting for a single paragraph. Note that there is no JUSTIFY option.

CENTER	Center all text in the paragraph. This is similar to the CENTER tag, but it applies only to one paragraph.

LEFT	Left-align all text in the paragraph. This is the default.

RIGHT	Right-align all text in the paragraph.

Example

<P>In the chocolate world, quality is judged by butterfat content.</P>
<P>In the medical world, longevity is estimated by butterfat content.</P>

In the chocolate world, quality is judged by butterfat content.

In the medical world, longevity is estimated by butterfat content.

Notes

The closing </P> tag is optional, but often used to ensure that there is blank space following the paragraph.

It is not necessary to begin paragraphs on new lines in the source HTML document. You can join any text together any way you find usable, and the browser will correctly interpret the tags.

Back in the typewriter days, we learned to add two spaces following each sentence. Today, the browser ignores any extra blanks. Regardless of how our source document looks, text is displayed with a single space separating words.

The P tag is not required following headings set with H1...H6 because the closing tag causes a line break.

Extra P tags are ignored by most browsers; we have to use other methods to add extra blank space between paragraphs. You can use the PRE tag to add large blank blocks. To add just a single blank line, use the &nbsp; code to force a blank paragraph.

<P>&nbsp;</P>

Use the alignment style for fully-justified text.

Compatibility

In Netscape, you should use </P> before tables or at the bottom of a document that will be displayed in a FRAME, to ensure that there is space between the elements.

Some very early browsers indent the first line of a paragraph. This trait is uncommon.

Multiple empty paragraphs are usually ignored.

The Align attribute is not supported by early browsers.

In Internet Explorer 3.x, if a paragraph uses Align, and it is immediately followed by a table, you must end the paragraph with /P. If you forget the closing /P tag, all paragraphs following the table are centered.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, Width, events

HTML 4 Attributes

Align, Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


PARAM tag
 PARAM

Set properties for an object; IE, 3.0 IE3

The PARAM tag is used with OBJECT to set property values for an object.

Attributes

Name =	The name that identifies the property.

Value =	This value is passed to the object. Numbers are converted to character values.

ValueType =	Describes the data type represented by Value.

DATA	Value is data. This is the default.

OBJECT	The Value references another object within the document.

REF	A URL.

Type =	The Internet media type.

Example

See the documentation furnished with your ActiveX control.

Notes

PARAM is used only within an OBJECT.

The closing /PARAM tag is optional.

Compatibility

PARAM is supported by MSHTML and Internet Explorer primarily to communicate with ActiveX controls.

MSHTML Attributes

Data, DataFld, DataSrc, Object, Ref, Title

HTML 4 Attributes

Name, Type, Value, ValueType

  Related Topics


PERSON is rarely supported by browsers.


PERSON tag
 PERSON, /PERSON

?

Attributes

Dir =

LTR

RTL

Class =

Lang =

Compatibility

The PERSON tag is not commonly supported.

  Related Topics


PLAINTEXT is deprecated in HTML 4. Use PRE.


PLAINTEXT tag
 PLAINTEXT, /PLAINTEXT

Display text in fixed-pitch font, without interpreting tags; 2.0

The PLAINTEXT tag tells the browser to display all text that follows exactly as it appears in the source document, without automatic word-wrapping, paragraph breaks or any other formatting.

Example

<HTML><BODY>
<P>This sample code demonstrates using equates and conditional tests with MASM 6.12:
<PLAINTEXT>IF @Version LT 612
  .ERR <MASM 6.12 or later required>
ENDIF
CPU386    TEXTEQU <@Cpu AND 01000y>
NOLOCALS  TEXTEQU <>
Global    TEXTEQU <EXTERNDEF>

This sample code demonstrates using equates and conditional tests with MASM 6.12:
IF @Version LT 612
  .ERR <MASM 6.12 or later required>
ENDIF
CPU386    TEXTEQU <@Cpu AND 01000y>
NOLOCALS  TEXTEQU <>
Global    TEXTEQU <EXTERNDEF>

Notes

The only time PLAINTEXT is likely to be useful is in documents that begin with formatted HTML introductions, but end with pre-formatted plain text.

In general, PLAINTEXT is a limited and unpredictable tag that is best avoided. See LISTING, which does interpret embedded HTML tags, or PRE, which does allow other tags in the document.

Compatibility

The PLAINTEXT tag is in deprecated in HTML 4. Use PRE instead of PLAINTEXT for more predictable results.

Netscape ignores all formatting tags that follow the PLAINTEXT tag. Once you have told the browser to ignore formatting tags, no other tags are interpreted, not even /BODY or /HTML.

Attributes are supported by MSHTML and Internet Explorer 4 or later.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

  Related Topics

  Style Topics


PRE tag
 PRE, /PRE

Display text in a fixed-pitch font; 2.0

The PRE tag displays blocks of pre-formatted text in fixed-width type. This flexible, versatile tag makes it simple to convert pre-formatted text files to HTML documents by adding only a minimum number of tags.

Attributes

Width = n	This optional attribute specifies the maximum number of fixed-width characters to display on each line. Width is a hint, to help the browser calculate the best display font. 40, 80, and 132-column lines are supported; 80-column text is the default.

Example

<HTML><HEAD><TITLE>Company Memo</TITLE></HEAD>
<BODY BGColor = "#FFFFFF">
<H1>Company Memo</H1>
<P>To: All Managers</P><PRE>

<!-- Insert your plain text memo here -->

</PRE></BODY></HTML>

Company Memo
To: All Managers

It has come to our attention that cholesterol levels of
employees has risen at a surprising rate since the intro-
duction of the free snack and café latté bar. Please try
to limit visits to the snack bar to twice per hour.

Notes

We often use PRE blocks to display fixed-pitch examples, such as the code samples in this book.

Simple HTML tags are allowed within a PRE block. You can, for example, use A to reference a link or B for bold text, but avoid other paragraph-formatting tags. Some surprising tags work, such as FONT and SMALL; be careful that they will work with

The PRE tag is especially useful for reproducing fixed-pitch lists, such as a list of E-mail summaries. You can embed formatting tags to add emphasis, but the width of the line is not changed, and the line will not word-wrap.

The browser may interpret the Width attribute to mean the font size should be reduced or enlarged to make the specified column width fit on the screen. The goal is to present information accurately and readably, regardless of the screen size.

If you need extra blank space between paragraphs, try using an empty PRE block:

<P>This is the paragraph above the blank space.
<PRE>

</PRE>
<P>And this is the paragraph following the blank space.

Compatibility

The Width attribute is not always supported; text is generally formatted for an 80-column screen.

Some browsers recognize the tab character (ANSI character value 9), and expand it to spaces at 8-column tab-stops. For consistent formatting, use spaces instead of tab stops.

The PRE tag replaces LISTING, PLAINTEXT and XMP tags, which are obsolete.

Netscape 4 word-wraps text in a PRE block if the tag is given a border style.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, Width, events

  Related Topics

  Style Topics


Q is a new tag, not widely supported.


Q tag
 Q, /Q

Format text as a quotation; 4.0

The new Q tag formats text as a quotation; for example, a reference to a passage of text in a book.

Attributes

Cite = url	The source of the quotation. Generally, this is the Internet address where the original document can be found.

Example

<P>The earth has been described as "<Q Cite = "hitchhikers.guide">Mostly harmless</Q>."

The earth has been described as "Mostly harmless."

Notes

In some implementations, the browser may automatically add quotation marks. If you use quotation marks around the text, the browser should not add additional quotation marks.

Depending on the language and country, quotation marks may be substituted by other characters. Indirect quotations may not be enclosed in quotation marks.

Compatibility

Q is rarely supported. Use quotation marks, CITE, I, or BLOCKQUOTE for compatibility.

HTML 4 Attributes

Cite, Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


REDIRECT is rarely supported by browsers.


REDIRECT tag
 REDIRECT

?

This uncommon tag tells the browser to load a URL. It may be used to tell the user that a document is now available at a different location.

Attribute

url	This quoted string is the destination.

Example

<HTML><HEAD><TITLE>Redirect to another page</TITLE>
<REDIRECT "url">
</HEAD>

<BODY>
<H1>We Have Moved</H1>
<P><A HRef = "url">Click here to jump to our new home.</A>

</BODY></HTML>

Notes

The REDIRECT tag is not part of any HTML standard. See META for a more reliable method of redirecting the browser to another document.

Compatibility

The REDIRECT tag is not commonly supported. In most browsers, REDIRECT does nothing—you should always offer an alternate way to load the specified document.

  Related Topics


S tag
 S, /S

Display text with a line through it; 2.0

The S tag displays text with a horizontal line through it.

Example

<P>Pizza is great with pepperoni, <S>anchovies,</S> bell pepper and mushrooms.

Pizza is great with pepperoni, anchovies, bell pepper and mushrooms.

Note

Like underlining text, avoid crossing-out text. It can confuse the reader, because references are underlined. Use B, CITE, EM or I to add emphasis.

Compatibility

Not widely supported. Some browsers do not support strike-through text, and substitute other typographical emphasis. The S tag is deprecated in HTML 4; STYLE and style sheets are recommended replacements.

Internet Explorer support both S and STRIKE tags.

Attributes are supported by MSHTML and Internet Explorer 4 or later.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


SAMP tag
 SAMP, /SAMP

Display text as a sample, in small, fixed-pitch font; 2.0

The SAMP tag formats passages of text, such as sample program source code, in small, fixed-pitch font.

Example

<P>Pass the value <SAMP>SW_SHOWMAXIMIZED</SAMP> to ShowWindow() for a maximized window.

Pass the value SW_SHOWMAXIMIZED to ShowWindow() for a maximized window.

Notes

The FONT tag can be used to override the default fixed-pitch font used by SAMP.

If you need bolder text than SAMP displays, try the KBD tag.

Compatibility

Attributes are supported by MSHTML and Internet Explorer 4 or later.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


SCRIPT tag
 SCRIPT, /SCRIPT

Describe embedded script language; 3.2

SCRIPT tags extend HTML with modern scripting tools. Several languages are available, and the SCRIPT tag tells the browser which language you are using.

Attributes

Language =	Commonly-used language names include JavaScript, JScript, and VBScript; JavaScript is the most common, though there is no standard. The Language attribute is recognized by most browsers.

Type = 	The name of scripting language, as an Internet Media Type. The Type attribute is not widely supported.

Src = url	Specifies the name of another file that contains the script code. The server must recognize the file type, or the scripts may not be recognized. In many cases, the script will be within the same source document, and the Src attribute is not used.

Example

<HTML><HEAD><TITLE>Script Example</TITLE></HEAD><BODY>
<SCRIPT Language = "JavaScript">
<!--
document.write ("JavaScript runs");

//JavaScript -->
</SCRIPT>

Notes

Scripts are interpreted by script engines, which may be built-into the browser, or they may be plug-in modules. If a scripting language is not supported, the browser may ignore the script, or it may display an error message.

Scripts may be defined within the HEAD or BODY of the document. There may be multiple scripts within a document, each delimited by SCRIPT and /SCRIPT tags.

You can define more than one script function within a SCRIPT block.

If a document depends on a script language and would not look acceptable if scripting were not available, be sure to add a NOSCRIPT section to the document.

Security concerns keep browser designers and scripting language developers straining to create versatile, powerful languages that don't allow unexpected errors to hang the browser, or unrestrained programs to compromise data on the computer. These constraints mean that scripting languages are always being extended with proprietary features, and browsers are always being extended with protection features.

We often use similar scripts in several documents; instead of including a copy of the scripts in every document, we can use a separate script document. This LINK example references a separate SCRIPT document:

<LINK Rel = "STYLESHEET" HRef = "java.htm" Type = "text/JavaScript">

Compatibility

SCRIPT is supported by later browsers, including Netscape 2 and Internet Explorer 3.

Not all browsers allow multiple SCRIPT tags or allow SCRIPT tags within the BODY of the document.

The VBScript scripting language, based on Visual Basic for Applications, is supported only by MSHTML and Internet Explorer. Most current browsers, including MSHTML support a form of JavaScript, which is based on the Java language. Java is a popular object-oriented programming language that is similar to C++.

The Language attribute is deprecated in HTML 4; Type is the recommended replacement. However, most browsers recognize only the Language attribute.

MSHTML Attributes

Class, Event, For, ID, In, Lang, Language, Library, Title, events

HTML 4 Attributes

CharSet, Defer, Language, Src, Type

  Related Topics


SELECT tag
 SELECT, /SELECT

Define a drop-down or list box; 2.0

The SELECT tag creates multiple-item list boxes in forms. Used with the OPTION tag, SELECT makes it possible to create scrollable or drop-down lists.

Attributes

Multiple	When present, multiple items in the list can be selected.

Name =	The name of the object. This is submitted with the results selected by the user.

Size = n	The height of the list window. If 1, the structure may be displayed as a drop-down list. A value of 2 or greater specifies a scrollable list.

Example

<FORM>
<SELECT Multiple Name = "Favorites" Size = 2>
<P>Select your favorite:<BR>

<OPTION Selected Value = 1>Chocolate
<OPTION Value = 2>Cheese
<OPTION Value = 3>Pizza
<OPTION Value = 4>Celery

</SELECT>

<INPUT Type = RESET>
</FORM>

Select your favorite:

Notes

SELECT structures are contained within sets of FORM tags, which may also enclose other types of data created with INPUT or TEXTAREA. Results from all of these structures are submitted together.

Long, complex lists of data can be hidden behind SELECT tags. This makes the screen clean and easier for many users to navigate.

Compatibility

In the example above, if we use Size = 1, Netscape displays a single-item list box, while Internet Explorer shows a four-item list box.

MSHTML Attributes

AccessKey, Align, Class, DataFld, DataSrc, Disabled, ID, Lang, Language, ReadOnly, Style, TabIndex, Title, Type, events

Netscape 4 Attributes

OnBlur, OnChange, OnClick, OnFocus

HTML 4 Attributes

Class, Dir, Disabled, ID, Lang, Multiple, Name, OnBlur, OnChange, OnSelect, Size, Style, TabIndex, Title, events

  Related Topics


Selected List Item
This item, highlighted in cyan, is selected. When the user sends the form, we will receive the number of this item.


Un-selected List Item
The item shown and items not shown are not selected. Only the first item in the list, Chocolate, is selected.


Scroll Bar
This is the scroll bar. The top and bottom arrows scroll through the window. Drag the "Thumb" to move through the text.


Reset Button
When the user clicks this button, multiple selections are cleared.


SERVER is supported only by Netscape 4. Other browsers may respond unpredictably to this tag.


SERVER tag
 SERVER, /SERVER

Run a LiveWire JavaScript NS4

While SCRIPT provides client-side JavaScript support, SERVER offers server-side script support.

Example

<SERVER>

. . . Call server-side JavaScript

</SERVER>

Notes

The JavaScript is run on the server, not on your browser.

There is no companion "NOSERVER" tag; use NOSCRIPT.

See your LiveWire Developer's Guide for more information.

Compatibility

SERVER is not an HTML standard. Supported by Netscape 4.

  Related Topics


SMALL tag
 SMALL, /SMALL

Display text is small font; 3.2

The SMALL tag displays text one size smaller.

Example

<P>Pizza, once cold, is always <SMALL>smaller</SMALL> than we remember.

Pizza, once cold, is always smaller than we remember.

Notes

To return to normal size text, use /SMALL, not BIG.

Text is usually formatted one size smaller than the current FONT setting.

Compatibility

SMALL is supported by newer browsers.

Attributes are supported by MSHTML and Internet Explorer 4 or later.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


SNML_FOLIO is rarely supported by browsers.


SNML_FOLIO tag
 SNML_FOLIO, /SNML_FOLIO

?

Note

Also found are SNML_BYLINE, SNML_CREDIT_LINE, SNML_HEADLINES, and SNML_TAGLINE.

Compatibility

The SNML_FOLIO tag is not commonly supported.

  Related Topics


SOUND is not supported by most popular browsers. See BGSOUND.


SOUND tag
 SOUND

Play background sound; Mosaic

The SOUND tag plays a sound file in the .WAV or .AU format.

Attributes

Delay = n	Specify the number of seconds to delay before playing the sound file.

Loop = n	Number of times to play the sound file. Specify INFINITE to play continuously.

Src = url	Specify a sound file name. Supports sound samples in .WAV and .AU format.

Example

<SOUND Src = "songndance.wav" Loop = 2>

Notes

Multiple sounds are allowed. The browser will play each sound in the sequence it finds it in the document.

Playing continuous background sound is a sure way to encourage the reader to look for another page to look at.

Remember that the music plays every time we view your document. If it's too clever, too long, or too superfluous, we may just avoid coming back for another look at the document.

Compatibility

Supported by Mosaic. Internet Explorer uses BGSOUND; Netscape uses EMBED.

  Related Topics

  Style Topics


SPACER is supported only by Netscape.


SPACER tag
 SPACER

Add extra blank space; NS

The SPACER tag adds blank space in a paragraph. It creates an empty blank rectangle.

Attributes

Align =	Alignment of the spacer, if the Type is BLOCK. Options include ABSBOTTOM, ABSMIDDLE, BASELINE, BOTTOM, LEFT, MIDDLE, RIGHT, TOP, and TEXTTOP.

Height = n	If Type of the spacer is a BLOCK, height of the spacer in pixels.

Size = n	If the Type is HORIZONTAL, Size is the width of the spacer. If Type is VERTICAL, Size is height. Values are specified in pixels.

Type =	The type of blank space created:

BLOCK	A rectangle. Specify Align, Height and Width to define the position and shape of the spacer.

HORIZONTAL	Blank horizontal space. Usually blank space between words or filler for a blank paragraph. Size specifies the width of the spacer.

VERTICAL	Blank vertical space. Causes a line break. Size specifies the height of the spacer.

Width = n	If the Type is BLOCK, the width, in pixels, of the spacer.

Example

<P>&nbsp;</P>

Notes

This Netscape-only tag provides a way to align data precisely, and elegantly solves the problem of how to add extra space between paragraphs.

If you need blank space, perhaps to add an empty paragraph for table alignment, try the special character "&nbsp;", which is supported by most browsers.

Compatibility

SPACER is supported only by Netscape.

  Related Topics

  Style Topics


SPAN tag
 SPAN, /SPAN

Define a style for a section of a document; 3.2

The SPAN tag marks a section within a paragraph with styles that override the standard formatting.

Attributes

Class = container	Assign this section a class that was defined in the style sheet. Optional.

Style =	Specify styles to be used in this section.

Example

<P>The price of <SPAN Style = "color:#008080; font-weight: bold">chocolate</SPAN> is not the same as the cost.

The price of chocolate is not the same as the cost.

Notes

/SPAN without an attribute restores the original document formatting.

While SPAN formats a section within a paragraph, DIV formats a section starting with a paragraph break.

The primary disadvantage of SPAN is document size. When possible, use Class instead of Style to minimize extra formatting codes.

Compatibility

SPAN is ignored by early browsers.

MSHTML Attributes

DataFld, DataFormatAs, DataSrc, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


STRIKE is deprecated in HTML 4. Use STYLE or S.


STRIKE tag
 STRIKE, /STRIKE

Display text with a line through it; 2.0

The STRIKE tag displays text with a horizontal line through it.

Example

<P>Pizza is great with pepperoni, <STRIKE>anchovies,</STRIKE> bell pepper and mushrooms.

Pizza is great with pepperoni, anchovies, bell pepper and mushrooms.

Note

Like underlining text, avoid crossing-out text. It can confuse the reader, because references are also underlined. Use B, CITE, EM or I to add emphasis.

Compatibility

Not widely supported. Some browsers do not support strike through text, and substitute other typographical emphasis.

Internet Explorer support both S and STRIKE tags.

For portability, use the S tag instead of STRIKE.

The STRIKE tag is deprecated in HTML 4; STYLE and style sheets are recommended replacements.

Attributes are supported by MSHTML and Internet Explorer 4 or later.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


STRONG tag
 STRONG, /STRONG

Display text in heavy, emphasized font; 2.0

The STRONG tag formats text in bold type for extra emphasis.

Example

<P>I asked for <STRONG>extra</STRONG> cheese!

I asked for extra cheese!

Notes

In most browsers, STRONG displays text formatted the same as B.

A valuable use for STRONG is to redefine it in a style, while B continues to work normally.

Compatibility

For portability, use STRONG instead of B to define big fat text.

Attributes are supported by MSHTML and Internet Explorer 4 or later.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


STYLE tag
 STYLE, /STYLE

Define a document formatting style; IE3, 4.0

The STYLE tag defines custom document formatting. With styles, we can customize how HTML formatting tags work, and create truly original page designs, while using standard HTML tags. If you are comfortable using word processor styles, you will probably find HTML styles familiar and—soon—indispensable.

Attributes

Media =	Specify the output device for the style. This new attribute is rarely supported.

ALL	Output is for all media.

BRAILLE	Tactile feedback devices.

PRINT	Printers or print-preview.

PROJECTION	Projectors.

SCREEN	Display on the screen, with standard browser features. This is the default.

SPEECH	Speech synthesizer.

Title =	Provides advisory information, or a description of the styles.

Type =	Specify the CSS language. For Internet Explorer 3, the Type must be declared, and it must be "text/css".

Example

<STYLE Type = "text/css"><!--

BIG {font-size:8pt; font-weight: bold; color: navy}
SMALL {font-size:12pt; font-weight: medium; font-family: sans-serif; color: purple}

--></STYLE><BODY>

<P>This example shows <BIG>big text that's not so big,</BIG> and <SMALL>small text that's not so small,</SMALL> formatted with custom styles.

This example shows big text that's not so big, and small text that's not so small, formatted with custom styles.

We say cascading styles because the document may reference an external style sheet, contain a STYLE section, and use local Style attributes to override formatting for just one object. This example combine multiple style definitions for a single paragraph.

<P Style = "border: thick navy ridge; background: #CCCCCC; align: center">Chocolate</P>

Notes

We enclose style definitions within !-- comment tags to ensure that they are not interpreted or displayed by older browsers.

For a consistent design with several HTML documents, you can declare your styles in a separate file, then use LINK to reference the styles. When we use a separate style sheet, we can update the look of all documents by changing just the style sheet. See LINK for information about linking style sheets.

When styles declared in the current document conflict with those in the style sheet, formatting declared later in the document overrides the style sheet.

Please don't depend only on styles for formatting. While cool features and design elements may be missing when the document is displayed by early browsers, the document must recognizable. Use styles to override standard HTML tag formatting—don't always use P with the Class or Style attribute, but use H1, and modify the font or color—so the viewer will at least see standard H1 formatting.

Avoid using extensive direct style formatting, declared with the Style attribute. Document maintenance is much easier if the styles are declared with the STYLE tag at the top of the document. It's easier yet if we use a separate, linked style sheet.

Compatibility

Styles are supported only by late-model browsers, including Internet Explorer 3.x and Opera 4. Supported by Netscape 4.0 and later—Netscape 3.0 does not support style sheets.

Internet Explorer 3 provides a limited implementation of styles. Design for later-model browsers, and let IE3 display what it can.

MSHTML Attributes

Disabled

HTML 4 Attributes

Dir, Lang, Media, Title, Type

  Related Topics

  Style Topics


SUB tag
 SUB, /SUB

Format text in subscript type; 3.2

The SUB tag renders text and numbers in subscript. Text is displayed in a smaller font, lower on the line than surrounding text.

Example

<P>(R<SUB>1</SUB> + R<SUB>2</SUB>)(<I>I</I><SUB>1</SUB>) -
(R<SUB>2</SUB>)(<I>I</I><SUB>2</SUB>) =
<I>V</I>

Notes

Be sure the text is readable and doesn't run-into surrounding text if it is rendered without being converted to subscript.

Subscript text is rendered one size smaller than surrounding text.

Using SUB adds additional spacing between the current and next line of text. This extra blank space may affect the appearance of the document.

Compatibility

Early browsers do not support SUB.

Attributes are supported by MSHTML and Internet Explorer 4 or later.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


SUP tag
 SUP, /SUP

Format text in superscript type; 3.2

The SUP tag renders text and numbers in superscript. Text is displayed in a smaller font, raised slightly above surrounding text.

Example

<P>The result is 10<SUP>27</SUP>.

Notes

Superscript text is rendered one size smaller than surrounding text.

Using SUP adds additional spacing between the current and preceding line of text. This extra blank space may affect the appearance of the document.

Compatibility

Early browsers do not support SUP. If the formatting is for a trademark notice, try enclosing the symbol in parentheses; this will ensure that the symbol does not run into the preceding text.

Attributes are supported by MSHTML and Internet Explorer 4 or later.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


TAB is rarely supported by browsers.


TAB tag
 TAB

Define tab-aligned data ?

Attributes

Align =

CENTER

DECIMAL

LEFT

RIGHT

DP =

ID =

Indent = n	(ens)

Compatibility

The TAB tag is not commonly supported.

  Related Topics

  Style Topics


TABLE tag
 TABLE, /TABLE

Define a table; 3.2

The TABLE tag defines the layout of a table; use TD, TH and TR to define cells in the table. Tables are the backbone of modern HTML page design; in addition to displaying tabular data, they are used to define multiple-column documents and change background colors within the page.

Attributes

Align =	If specified, this attribute sets the horizontal alignment of the table on the screen:

CENTER	The table is horizontally-centered on the screen. The CENTER option is rarely supported.

LEFT	Align the table on the left margin; allow text to flow around the right of the table.

RIGHT	Align the table on the right margin; allow text to flow around the left side of the table. Not fully supported by Netscape 4.

Background = url	Specify a picture as the background of the table. The picture is tiled behind all cells in the table. Similar to the BODY Background attribute. MSHTML only.

BGColor = color	 RGB Hex-triplet color value. If not specified, the table background is transparent.

Border = n	Width, in pixels, of borders around each table cell. Optional.

BorderColor = color	Color of the three-dimensional border of the table border. MSHTML and Netscape 3 or later only.

BorderColorDark = color	Color of the three-dimensional shadow of the table border. MSHTML only.

BorderColorLight = color	Color of the three-dimensional highlight of the table border. MSHTML only.

CellPadding = n	Number of pixels between the edge of the text and the border of the table cell.

CellSpacing = n	Number of pixels between the frame and table cells.

Cols = n	Number of columns in the table. If specified, the browser may be able to calculate table dimensions and draw the table faster. Optional.

Frame = type	Specify which sides of the table will have borders. Use with Rules for complete control over table borders. Border must be non-zero for frames to be displayed.

ABOVE	A border line at the top of the table.

BELOW	A border line below the table.

BORDER	All four sides.

BOX	Around all four sides.

HSIDES	A border line above and below the table.

LHS	Left-hand side only.

RHS	Right-hand side only.

VOID	Remove outside table borders.

VSIDES	Left- and right-hand sides only.

Height = n	Height of the table in pixels. Includes the height of all table rows. Supported by MSHTML and Netscape 4.

Rules =	Specify how borders within the table are displayed. Border must be non-zero for frames to be displayed.

ALL	Borders between every table cell.

COLS	Vertical border between each column.

ROWS	Horizontal border between each row.

GROUPS	Horizontal borders between groups. Specify groups with COLGROUP, TBODY, TFOOT, and THEAD.

NONE	Remove all interior borders.

Width = n	Width of the table, in pixels or percentage of screen width.

Examples

The example creates a table with two columns, half as wide as the screen. This table has a single-pixel border; most browsers display table borders with three-dimensional effects.

<TABLE Cols = "2" Width = "50%" Border = "1">

<TR><TH>Col 1</TH>
<TH>Col 2</TH></TR>

<TR><TD Align = "LEFT">Col 1</TD>
<TD Align = "RIGHT">Col 2</TD></TR>
</TABLE>

Click on the illustration to see the HTML tags:

This second example creates a table with multiple cell sizes.

<TABLE Width = 240 Cols = 3 Border = 1 CellPadding = 4>

<TR> <!-- First Row -->
<TD ColSpan = 2 BGColor = "#66FFFF">Two columns wide</TD>
<TD Width = 60>3</TD>
</TR>

<TR> <!-- Second Row -->
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>

<TR> <!-- Third Row -->
<TD RowSpan = 2 BGColor = "#CCCCCC">This cell is two rows tall</TD>
<TD>2</TD>
<TD BGColor = "#FFCCCC">3</TD>
</TR>

<TR> <!-- Fourth Row (there are only two columns) -->
<TD>2</TD>
<TD>3</TD></TR>

</TABLE>

The third example uses the ColSpan attribute to create a simple bar chart. Control columns width by specifying the width of each TH tag.

<TABLE Cols = 12 Width = "100%" Border = 0 CellPadding = 2 CellSpacing = 2>

<TR BGColor = "#CCCCFF">
<TH Width = "20%">Subject</TH><TH Width = "10%">#</TH>
<TH Width = "7%">1</TH><TH Width = "7%">2</TH>
<TH Width = "7%">3</TH><TH Width = "7%">4</TH>
<TH Width = "7%">5</TH><TH Width = "7%">6</TH>
<TH Width = "7%">7</TH><TH Width = "7%">8</TH>
<TH Width = "7%">9</TH><TH Width = "7%">10</TH>
</TR>

<TR>
<TD>Item 1</TD><TD>4</TD>
<TD ColSpan = 4 BGColor = "#666666">&nbsp;
</TD></TR>

<TR><TD>Item 2</TD>
<TD ColSpan = 6 BGColor = "#996666">&nbsp;
</TD></TR>

<TR><TD>Item 3</TD><TD>3</TD>
<TD ColSpan = 3 BGColor = "#999933">&nbsp;
</TD></TR>

<TR><TD>Item 4</TD><TD>8</TD>
<TD ColSpan = 8 BGColor = "#339999">&nbsp;
</TD></TR>

</TABLE>

Notes

Most HTML documents use at least one TABLE element. It may not be obvious, because the table background may be the same as the document, and there probably are no borders. When we need text in variable-width columns or pictures neatly aligned along one border, we use tables.

The Cols setting helps some browsers calculate table dimensions, and may help the browser display tables faster. If the number of columns in the table differs from the value set by Cols, there may be a noticeable delay as table dimensions are recalculated and the table is redrawn.

While designing tables, use a Border setting, even if the completed table will not have borders. This makes it easy to use your browser to see exact placement and alignment of design elements.

Note that Rules uses NONE to turn off borders, while Frame uses VOID.

Only MSHTML supports the BorderColorDark and BorderColorLight attributes. MSHTML and Netscape 4 recognize BorderColor. These values are generally unnecessary because the browser automatically calculates three-dimensional border colors that complement the background color set with the BODY tag.

Only specify the Height attribute for the first cell in a column. If you change the width later, the width of all cells in the column will be changed—and not always predictably.

Specify enough column width information to ensure that the browser will format the table presentably. For instance, Netscape 4 often creates columns of equal width if you specify only the width of a single column—even if your intention is to fill the page with the table. One work-around is to place a line somewhere in the table column, using HR with the Width attribute set to the minimum column width.

Compatibility

Netscape ignored the BGColor attribute until version 3.0. This means that all text within tables is displayed over the background color set by the BODY tag.

For compatibility with browsers that don't support tables, always begin data in table cells with the P tag.

Don't nest tables! That is, don't put a table within a table. Some browsers handle nested tables poorly (and may even crash), while others slow to a crawl when calculating and formatting all those screen coordinates.

NCSA Mosaic 3 does not support the BGColor attribute for TABLE. Use BGColor with the TD tag for Mosaic 3 compatibility.

Neither Internet Explorer 3 nor Netscape 3 supports the CENTER option for the Align attribute. Internet Explorer 4, Netscape 4, and Opera 3 support CENTER.

The Align attribute is deprecated in HTML 4.

While the Frame attribute is supported by the HTML 4.0 standard, it is recognized by only a few browsers, notably Internet Explorer. The TABLE Frame attribute is not related to the FRAME tag.

Early releases of MSHTML allow text to follow a table on the same line. Always use the P tag at the beginning of text that follows a table.

Avoid using TABLE within a BLOCKQUOTE section. Netscape 4 does not account for the indentation, which makes tables wider than the screen.

Background, BorderColor, BorderColorDark, and BorderColorLight are supported by MSHTML and Internet Explorer only. Netscape 4 recognizes BorderColor.

Empty table cells are often ignored by the browser, resulting in unexpected alignment. Add a blank paragraph, formatted with <P>&nbsp;</P>, to a blank table cell.

Netscape ignores the BASEFONT or current FONT setting within tables, returning instead to the default browser font. You must use FONT and /FONT within each table cell that requires special fonts. Internet Explorer and Opera 3 recognize the current FONT setting within tables.

MSHTML Attributes

Class, DataSrc, Height, ID, Lang, Language, Style, Title, events

Netscape 4 Attributes

HSpace, VSpace

HTML 4 Attributes

Align, BGColor, Border, CellPadding, CellSpacing, Class, Cols, Dir, Frame, ID, Lang, Rules, Style, Summary, Title, Width, events

  Related Topics

  Style Topics


<TR><TH>Col 1</TH>


<TH>Col 2</TH></TR>


<TR><TD Align = "LEFT">Col 1</TD>


<TD Align = "RIGHT">Col 2</TD></TR>


<TR><TD ColSpan = 2 BGColor = "#66FFFF">Two columns wide</TD>


<TD Width = 60>3</TD></TR>


<TR><TD>1</TD>


<TD>2</TD>


<TD>3</TD></TR>


<TD>2</TD>


<TR><TD>2</TD>


<TR>3</TD></TR>


TBODY is rarely supported by browsers.


<TD ColSpan = 8 BGColor = "#339999">&nbsp;
</TD></TR></TABLE>


TBODY tag
 TBODY, /TBODY

Define body of a table; 3.2

The TBODY tag is used within a TABLE block to separate the head of the table (set with THEAD). The primary use for TBODY, THEAD and TFOOT is to divide a table into logical sections, called groups, that will use different formatting.

Example

This example uses the TABLE Rules attribute to specify a horizontal rule separating each group. There are two groups defined: the head is defined with THEAD, and the body uses TBODY. The Style attribute in TABLE overrides font formatting:

<TABLE Cols = 2 Frame = "VOID" Rules = "GROUPS" Border = "1" BGColor = "#FFFF66" CellSpacing = "6" Style = "color: navy; font-family: Arial">

<THEAD>
<TR><TD>Head Column 1</TD>
<TD>Head Column 2</TD></TR>
</THEAD>

<TBODY>
<TR><TD>Column 1 data</TD>
<TD>Column 2 data</TD></TR>
<TR><TD>Column 1 data</TD>
<TD>Column 2 data</TD></TR>
</TBODY>

<TFOOT>
<TR><TD>Column 1 footer</TD>
<TD>Column 2 footer</TD></TR>
</TFOOT></TABLE>

Click on the illustration to see the HTML tags:

Notes

We often divide tables into logical sections: the head, delimited by THEAD tags, the body, delimited by TBODY tags, and the footer, delimited by TFOOT tags. The Rules attribute in TABLE describes the lines to separate these sections, and styles within the tags define the appearance of text.

With later browsers, you can use styles to customize formatting of groups.

See TABLE and Introducing Tables for limitations and suggestions.

Compatibility

TBODY, THEAD and TFOOT are supported by Internet Explorer, but ignored by Netscape 3 or earlier.

Internet Explorer 3 ignores the Style attribute in TBODY.

MSHTML Attributes

Align, BGColor, Class, ID, Lang, Language, Style, Title, VAlign, events

HTML 4 Attributes

Align, CellHAlign, CellVAlign, Char, CharOff, Class, Dir, ID, Lang, Style, Title, VAlign, events

  Related Topics

  Style Topics


<TABLE Cols = 2 Frame = "VOID" Rules = "GROUPS" Border = "1" BGColor = "#FFFF66" CellSpacing = "6" Style = "color: navy; font-family: Arial">


<THEAD>
<TR><TD>Head Column 1</TD>


<TD>Head Column 2</TD></TR>
</THEAD>


<TD>Column 2 footer</TD></TR>
</TFOOT></TABLE>


TD tag
 TD, /TD

Create a cell in a table; 3.2

The TD tag creates a cell in a table. Use TABLE to define the properties, then TR to create a table row, and finally, TD to create cells in the row.

Attributes

Align =	Horizontal alignment of text in the cell. CENTER is default.

CENTER	Center text in the cell.

LEFT	Left-align text in the cell.

RIGHT	Right-align text in the cell.

Background = url	Specify a picture as the background of the table. The picture is tiled behind all cells in the table. Similar to the BODY Background attribute. MSHTML only.

BGColor = color	 RGB Hex-triplet color value. If not specified, the background of the cell is the same color set by TABLE; if no color is specified, it is transparent.

ColSpan = n	The ColSpan attribute forces a cell to extend beyond one column in a table. Specify zero (0) to force the cell to span from the current column to the last column in the table.

NoWrap = NOWRAP	Don't word-wrap text in this cell. NoWrap forces all text to be displayed on one line, which can result in very wide table cells.

RowSpan = n	If present, this attribute forces the contents of a cell to span multiple rows in the table. Specify zero (0) to force the cell to span from the current row to the last row in the table.

VAlign =	Specify text vertical alignment within the cell. The VAlign attribute is not recognized by all browsers.

BASELINE	Aligned along the baseline that adjoins cells.

BOTTOM	Aligned at the bottom of the cell.

MIDDLE	Aligned in the middle of the cell.

TOP	Aligned at the top of the cell.

Example

<TABLE Border = 1 BGColor = "#66FFFF">

<TR>
 <TD>First data</TD>
 <TD>Second</TD>
 <TD>Third</TD>
</TR>

<TR>
 <TD BGColor = "#FFCCFF">Fourth data</TD>
 <TD>Fifth</TD>
</TR>
</TABLE>

Notice that the TABLE tag sets the background color to light cyan, but the first cell in the second row changes the color just for that cell. Click on the illustration to see the HTML tags:

Notes

/TD is optional if there is only one cell in a row.

Performance is a major issue when displaying large tables. ColSpan and RowSpan may cause delays when rendering the table.

Compatibility

Internet Explorer 2 ignores the Width attribute, but TABLE Width does work, making for sloppy-looking multiple-column documents. Width works with Netscape 2.

While Netscape 3 correctly displays tables that use both ColSpan and RowSpan attributes in different rows, Netscape 4.0 may cause incorrect column widths. It is best to avoid using ColSpan and RowSpan within the same table.

NCSA Mosaic 3 recognizes the BGColor attribute. However, it ignores the FONT Color attribute. For this reason, table colors must be readable over the default font color set with the BODY tag.

The NoWrap attribute is deprecated in HTML 4; STYLE and style sheets are recommended replacements.

Avoid specifying the Width element with absolute values. Use percentage of screen size or let the browser automatically determine the column width. This ensures that the text and images will fit within a column.

Background, BorderColor, BorderColorDark, and BorderColorLight attributes are supported by Internet Explorer 3 and later.

Empty table cells are often ignored by the browser, resulting in unexpected alignment. Add a blank paragraph, formatted with <P>&nbsp;</P>, to a blank table cell.

MSHTML Attributes

Class, Height, ID, Lang, Language, Style, Title, Width, events

HTML 4 Attributes

Abbr, Align, Axes, Axis, CellHAlign, CellVAlign, Char, BGColor, CharOff, Class, ColSpan, Dir, Headers, ID, Lang, NoShade, Rows, Scope, Style, Title, VAlign, events

  Related Topics

  Style Topics


<TABLE Border = 1 BGColor = "#66FFFF">

<TR>

<TD>First data</TD>


<TD>Second</TD>


<TD>Third</TD>

</TR>


<TR>

<TD BGColor = "#FFCCFF"> Fourth data</TD>


<TD>Fifth</TD>

</TR>

</TABLE>


Unused Table Cell
There is no data for the sixth table cell. The browser displays an empty cell.


TEXTAREA tag
 TEXTAREA, /TEXTAREA

Define a multiple-line data entry box; 2.0

The TEXTAREA tag creates a multiple-line text input form. Text is displayed in a multiple-row box with scroll bars. TEXTAREA is used with FORM and INPUT to create sophisticated, multiple-part input screens.

Attributes

Cols =	The maximum number of fixed-pitch characters allowed on one line. Required.

Name =	This the name of the control. This name is paired with the text when the data is submitted to the server. Required.

Rows =	The number of fixed-pitch text rows on in the box. If the user enters more lines than fit in the box, the text scroll, but text is not truncated. Required.

TabIndex =	If there are multiple input areas in the document, you can use TabIndex to change the Tab order. TabIndex is not always supported; the Tab order is determined by the order objects are defined in the document.

Wrap =	Tells Netscape how to handle long lines.

OFF	Don't wrap long lines. Allow text to scroll horizontally. Useful for entering multiple-line data like names and addresses. This is the default.

ON	Let text word-wrap to fit within the window. Useful for entering textual data, such as suggestions.

PHYSICAL	Let text word wrap to fit within the window.

VIRTUAL	Let text word wrap to fit within the window, but send the text as long lines.

Example

<FORM Target = "top" Action = "mailto:url" Method = "post">

<TEXTAREA Cols = 16 Rows = 4 Name = "Favorites" Wrap = "ON">Chocolate
Cheese
Pizza
</TEXTAREA></FORM>

Notes

The number of characters allowed in a TEXTAREA field is limited to 256-1024 characters, depending on the implementation.

The user presses the TAB key to move among multiple input boxes on the page. Pressing ENTER within a TEXTAREA box starts a new line.

Input forms often use multiple INPUT boxes instead of using TEXTAREA with word-wrap turned off, to enter separate, unrelated data items.

While TEXTAREA requires a start and end tag, INPUT requires only one tag.

Compatibility

Netscape displays text in a TEXTAREA box with the default fixed-pitch font. Internet Explorer uses a small sans-serif proportional font.

With Internet Explorer, the first line of text should immediately follow the TEXTAREA tag to prevent a blank line being displayed at the top of the input box.

MSHTML Attributes

AccessKey, Align, Class, Cols, DataFld, DataSrc, Disabled, ID, Lang, Language, ReadOnly, Style, TabIndex, Title, Type, events

Netscape 4 Attributes

OnBlur, OnChange, OnFocus, OnSelect

HTML 4 Attributes

Class, Cols, Dir, Disabled, ID, Lang, Name, OnBlur, OnChange, OnSelect, ReadOnly, Rows, Style, TabIndex, Title, events

  Related Topics


Input Window
This is text entered by the user or in the document between the TEXTAREA and /TEXTAREA tags.


Insertion Point
The flashing cursor points to the insertion point. Typing a character places it on the screen; pressing Enter starts a new line.


Scroll Bar
This is the scroll bar. The top and bottom arrows scroll through the window Drag the "Thumb" to move through the text.


TEXTFLOW is rarely supported by browsers.


TEXTFLOW tag
 TEXTFLOW, /TEXTFLOW

Define text for an APPLET;

The TEXTFLOW tag may be used within an APPLET to define text to display if the browser cannot execute the Applet.

Notes

This non-standard tag is unnecessary, and not part of any HTML standard.

Use the APPLET tag's Alt attribute instead of TEXTFLOW.

Compatibility

TEXTFLOW is rarely supported. Not supported by Netscape or MSHTML.

  Related Topics


TFOOT is rarely supported by browsers.


TFOOT tag
 TFOOT, /TFOOT

Define the footer in a table; 3.2

The TFOOT tag defines the foot section of a table. Used within a table defined with the TABLE tag, TFOOT delimits the rows in the table footer, and distinguish them from the TBODY and THEAD sections.

The primary use for TBODY, THEAD and TFOOT is to divide a table into logical sections that will use different formatting.

Example

This example uses the TABLE Rules attribute to specify a horizontal rule separating each group. There are two groups defined: the head is defined with THEAD, and the body uses TBODY. The Style attribute in TABLE overrides font formatting:

<TABLE Cols = 2 Frame = "VOID" Rules = "GROUPS" Border = "1" BGColor = "#FFFF66" CellSpacing = "6" Style = "color: navy; font-family: Arial">

<THEAD>
 <TR><TD>Head Column 1</TD>
 <TD>Head Column 2</TD></TR>
</THEAD>

<TBODY>
 <TR><TD>Column 1 data</TD>
 <TD>Column 2 data</TD></TR>
 <TR><TD>Column 1 data</TD>
 <TD>Column 2 data</TD></TR>
</TBODY>

<TFOOT>
 <TR><TD>Column 1 footer</TD>
 <TD>Column 2 footer</TD></TR>
</TFOOT></TABLE>

Click on the illustration to see the HTML tags:

Notes

We often divide tables into logical sections: the head, delimited by THEAD tags, the body, delimited by TBODY tags, and the footer, delimited by TFOOT tags. The Rules attribute in TABLE describes the lines to separate these sections, and styles within the tags define the appearance of text.

With later browsers, you can use styles to customize formatting of groups.

See TABLE and Introducing Tables for limitations and suggestions.

Compatibility

TBODY, THEAD and TFOOT are supported by Internet Explorer, but ignored by Netscape 3 or earlier.

Internet Explorer 3 ignores the Style attribute in TFOOT.

MSHTML Attributes

Align, BGColor, Class, ID, Lang, Language, Style, Title, VAlign, events

HTML 4 Attributes

Align, CellHAlign, CellVAlign, Char, CharOff, Class, Dir, ID, Lang, Style, Title, VAlign, events

  Related Topics

  Style Topics


TH tag
 TH, /TH

Define the heading in a table; 3.0

The TH tag creates a heading cell in a table. The cell is formatted much like TD, but text is displayed in emphasized (usually bold) type.

Use TABLE to define the properties, TH to create the first row, then TR to create a table row, and finally, TD to create cells in the row.

Attributes

Align =	Horizontal alignment of text in the cell.

CENTER	Center text in the cell. This is the default.

LEFT	Left-align text in the cell.

RIGHT	Right-align text in the cell.

BGColor = color	 RGB Hex-triplet color value. If not specified, the background of the cell is the same color set by TABLE; if no color is specified, it is transparent.

ColSpan = n	The ColSpan attribute forces a cell to extend beyond one column in a table. Specify zero (0) to force the cell to span from the current column to the last column in the table.

NoWrap = NOWRAP	Don't word-wrap text in this cell. NoWrap forces all text to be displayed on one line, which can result in very wide table cells.

RowSpan =	If present, this attribute forces the contents of a cell to span multiple rows in the table. Specify zero (0) to force the cell to span from the current row to the last row in the table.

VAlign =	Specify text vertical alignment within the cell. The VAlign attribute is not recognized by all browsers.

BASELINE	Aligned along the baseline that adjoins cells.

BOTTOM	Aligned at the bottom of the cell.

MIDDLE	Aligned in the middle of the cell.

TOP	Aligned at the top of the cell.

Example

<TABLE Border = 0 CellPadding = 8 CellSpacing = 0>

<TR BGColor = "#0099FF">
 <TH>First column</TH>
 <TH>Second column</TH>
</TR>

<TR>
 <TD> First data</TD>
 <TD>Second data</TD>
</TR></TABLE>

There is no border on the table, and the first row is blue. Text in the TH cells is bold. Click on the illustration to see the HTML tags:

Notes

We often use TH to define cells the first row of a table, when the first row is labels describing data in following rows. This tag is optional, and seldom used.

The TH tag is not required; you can simply use TD and B to make bold table cells. The main advantages are that the browser may be able to add platform-dependent additional formatting to improve the look of the table, and you can use styles to enhance the appearance of cells created with TH, while applying different styles to the body of the table.

Compatibility

Background, BorderColor, BorderColorDark, and BorderColorLight attributes are supported by Internet Explorer 3 and later.

MSHTML Attributes

Background, BorderColor, BorderColorDark, BorderColorLight, Class, Height, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Align, Axes, Axis, BGColor, Char, CharOff, Class, ColSpan, Dir, ID, Lang, NoWrap, RowSpan, Style, Title, VAlign, events

  Related Topics

  Style Topics


<TABLE Border = 0 CellPadding = 8 CellSpacing = 0>

<TR BGColor="#0099FF">

<TH>First column</TH>


<TH>Second column</TH>

</TR>


<TR>

<TD> First data</TD>


<TD>Second data</TD>

</TR></TABLE>


THEAD is rarely supported by browsers.


THEAD tag
 THEAD, /THEAD

Define a header in a table; 3.0

The THEAD tag is used within a TABLE block to separate the head of the table from the body (which is set with TBODY). The primary use for TBODY, THEAD and TFOOT is to divide a table into logical sections that will use different formatting.

Example

This example uses the TABLE Rules attribute to specify a horizontal rule separating each group. There are two groups defined: the head is defined with THEAD, and the body uses TBODY. The Style attribute in TABLE overrides font formatting:

<TABLE Cols = 2 Frame = "VOID" Rules = "GROUPS" Border = "1" BGColor = "#FFFF66" CellSpacing = "6" Style = "color: navy; font-family: Arial">

<THEAD>
<TR><TD>Head Column 1</TD>
<TD>Head Column 2</TD></TR>
</THEAD>

<TBODY>
<TR><TD>Column 1 data</TD>
<TD>Column 2 data</TD></TR>
<TR><TD>Column 1 data</TD>
<TD>Column 2 data</TD></TR>
</TBODY>

<TFOOT>
<TR><TD>Column 1 footer</TD>
<TD>Column 2 footer</TD></TR>
</TFOOT></TABLE>

Click on the illustration to see the HTML tags:

Note

For simple table designs, consider using TH instead of THEAD.

Compatibility

TBODY, THEAD and TFOOT are supported by Internet Explorer, but ignored by Netscape 3 or earlier.

Internet Explorer 3 ignores the Style attribute in THEAD.

MSHTML allows THEAD to use many of the same attributes as TABLE. This includes Align, Background, BGColor, BorderColor, BorderColorDark, ColSpan, NoWrap, RowSpan, and VAlign.

MSHTML Attributes

Align, BGColor, Class, ID, Lang, Language, Style, Title, VAlign, events

HTML 4 Attributes

Align, CellHAlign, CellVAlign, Char, CharOff, Class, Dir, ID, Lang, Style, Title, VAlign, events

  Related Topics

  Style Topics


TITLE tag
 TITLE, /TITLE

Specify the document window title; 2.0

The TITLE describes the document. Usually displayed at the top of the browser window, this design element uniquely personalizes the document.

Example

<HTML><HEAD>
<TITLE>Chocolate-world home page</TITLE>
</HEAD>

Notes

The TITLE tag must be contained within the HEAD section of the document. See the HTML tag for a more complete example.

Always use document titles. They aid navigation, and search engines will display the title with the document summary. Many browsers use the document title in bookmarks.

Don't use any other HTML tags within the document title. Generally any embedded tags will be displayed within the title, without being interpreted.

Compatibility

Title attribute supported by MSHTML and Internet Explorer 4 or later.

The document title must be short enough to fit at the top of the screen. Usually, the title is shorter than 60 characters. Longer titles may be truncated by the browser.

Netscape does not allow !-- comments within the TITLE section.

MSHTML Attributes

ID, Title

HTML 4 Attributes

Dir, Lang

  Related Topics

  Style Topics


TR tag
 TR, /TR

Format a row in a table; 3.0

The TR tag defines a table row within a TABLE structure. Each cell in the row is created by the TH (table head) or TD (table data) tags.

Attributes

Align =	Horizontal alignment of text in each cell. CENTER is default.

CENTER	Center text in the cell.

LEFT	Left-align text in the cell.

RIGHT	Right-align text in the cell.

BGColor = color	 RGB Hex-triplet color value. If not specified, the background of the cell is the same color set by TABLE; if no color is specified, it is transparent.

VAlign =	Specify text vertical alignment within the table row. The VAlign attribute is not recognized by all browsers.

BASELINE	Aligned along the baseline that adjoins cells.

BOTTOM	Aligned at the bottom of the cell.

MIDDLE	Aligned in the middle of the cell.

TOP	Aligned at the top of the cell.

Example

<TABLE Border = 1 BGColor = "#66FFFF">

<TR>
 <TD>First data</TD>
 <TD>Second</TD>
 <TD>Third</TD>
</TR>

<TR>
 <TD BGColor = "#FFCCFF">Fourth data</TD>
 <TD>Fifth</TD>
</TR>
</TABLE>

Click on the illustration to see the HTML tags:

Note

Each table row begins with the TR tag. Notice that in the example above the TABLE tag sets the background color to light cyan, but the first cell in the second row changes the color just for that cell.

Compatibility

The Align attribute is deprecated in HTML 4.

Background, BorderColor, BorderColorDark, and BorderColorLight are supported by MSHTML and Internet Explorer only.

For compatibility with browsers that don't support tables, always begin data in table cells with the P tag.

MSHTML Attributes

BorderColor, BorderColorDark, BorderColorLight, Class, Height, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Align, BGColor, CellHAlign, CellVAlign, Char, CharOff, Class, Dir, ID, Lang, Style, Title, VAlign, events

  Related Topics

  Style Topics


TT tag
 TT, /TT

Display text in fixed-pitch font; 2.0

The TT tag displays text in the default fixed-pitch type font. Text is usually displayed one size smaller than surrounding text.

Example

<P>Use the TT tag to make a modern, high-powered computer display text <TT>just like a rusty old teletype machine.</TT>

Use the TT tag to make a modern, high-powered computer display text just like a rusty old teletype machine.

Note

The TT tag does not cause a paragraph break. Use PRE to format multiple lines of text with fixed-pitch type.

For a heavier fixed-pitch font, try the KBD tag.

The default font for TT is the standard fixed-pitch (monospace) font used by the browser. You can use Style to override every aspect of the type. You can use this feature to prove that TT displays text in a smaller size:

<P>This is standard text. <TT Style = "font-family: Times New Roman; color: purple">This is TT text.</TT>And now back to regular text.

This is standard text. This is TT text. And now back to regular text.

Compatibility

Some browsers do not change the font style if FONT is declared before TT.

NCSA Mosaic treats TT as a paragraph tag, forcing a line break.

Most browsers display text formatted with TT the same as CODE text. CODE causes a line break in some old browsers. Use TT or KBD instead of CODE to avoid this problem.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


U is deprecated in HTML 4. Avoid underlining text in HTML documents.


U tag
 U, /U

Display text underlined; 2.0

The U tag underlines short passages of text to add emphasis.

Example

<P>In HTML documents, <U>underlined</U> text represents links.

In HTML documents, underlined text represents links.

Note

Avoid underlining text. It can confuse the reader, because references are also underlined. Use B, CITE, EM, I or STRONG to add emphasis.

Compatibility

Not supported by early browsers.

Part of the HTML 3.0 standard. U is deprecated in HTML 4; STYLE and style sheets are recommended replacements.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


UL tag
 UL, /UL

Define an bulleted list; 2.0

The UL tag describes an indented, unordered, bulleted list. Each list item, marked by the LI tag, begins with a bullet.

Attributes

Type = type	Change the appearance of the bullet displayed at the beginning of each line. Netscape and Opera 3 only. Three bullet shapes are supported:

CIRCLE	 A hollow round bullet.

DISC	 A solid color round bullet. This is the default Netscape bullet.

SQUARE	 A solid color square bullet.

Example

<P>Features include:
<UL Type = "CIRCLE">
<LI>Taste
<LI>Texture
<LI>Color
</UL>

  Features include:
      Taste
      Texture
      Color

You can nest multiple UL structures; the browser will indent each level slightly more. This example, using default Netscape-style bullets, shows nested lists:

<UL>Bullets used in unordered lists<BR>
<LI>First level
  <UL><LI>Second level
    <UL><LI>Third level
      <UL><LI>Fourth level
</UL></UL></UL></UL>

       Bullets used in unordered lists
    First level
             Second level
                   Third level
                         Fourth level

Notes

Use unordered lists instead of pictures to draw attention to groups of related items. This is fast because there is no delay to wait for pictures to download, and portable because it's supported easily by any browser, new or old, in text or graphics modes.

Some HTML editor programs use the UL tag to indent blocks of text, much as we often use BLOCKQUOTE. This usually works because browsers begin indenting immediately, regardless of if they find the LI tag to format list items. We don't recommend the practice.

In Netscape 3 or earlier and Opera 3, you can change the color of the bullet by changing the BODY Text attribute; the bullet color will stay the same, even if you change the text color with the FONT Color attribute. In Netscape 4 or Internet Explorer, changing the FONT Color attribute changes the color of bullets.

Compatibility

In Netscape and Opera, be sure to use the Type attribute, because otherwise the default Netscape and Opera bullet is a big ugly black blob. The Type attribute is ignored by Internet Explorer, which always uses a round bullet.

In Netscape 4, the default round bullet is smaller than in previous versions.

MSHTML Attributes

Align, Class, Compact, ID, Lang, Language, Src, Style, Title, events

HTML 4 Attributes

Class, Compact, Dir, ID, Lang, Style, Title, Type, events

  Related Topics

  Style Topics


VAR tag
 VAR, /VAR

Display text in small, italic font; 2.0

Usually used in technical documents, the VAR tag is often used to format words as variable names in program descriptions.

Example

<P>The variable <VAR>_fileinfo</VAR> defines file handling methods.

The variable _fileinfo defines file handling methods.

Notes

Text with the VAR tag is usually rendered in italics.

The CODE tag is often used to represent function names, while VAR is used for variable names. Following this convention ensures that the document uses consistent and standard formatting.

<P>The <CODE>Hex</CODE>(<VAR>number</VAR>) function converts a number to a string.

The Hex( number ) function converts a number to a string.

Compatibility

Attributes are supported by MSHTML and Internet Explorer 4 or later.

Internet Explorer may display VAR in small, fixed-pitch type. Netscape displays text in italics.

MSHTML Attributes

Class, ID, Lang, Language, Style, Title, events

HTML 4 Attributes

Class, Dir, ID, Lang, Style, Title, events

  Related Topics

  Style Topics


WBR is not part of the HTML standard.


WBR tag
 WBR

Allow an optional word break in a line; NS, IE

The WBR tag marks places within the line where the browser can split text to start a new line. The line break is optional, and will be ignored by the browser if the text will fit on one line.

WBR allows a line break within a non-breaking section that was defined with the NOBR tag.

Example

<NOBR>This inappropriately long line will be displayed all on the same line, truncating on the right, if necessary. <WBR>This line, without changing formatting, may be split on a new line, if necessary.
</NOBR>

Notes

The line break is optional. Use BR to force a line break.

The WBR tag is useful when we want to allow the browser to break the line, but only at a logical place within the line.

Browsers do not recognize hyphenated words as two separate words. This causes long words to be moved to another line, instead of being split between lines. The WBR tag makes it easier for browsers to uniformly fill each line, without unnaturally-short lines followed by hyphenated text.

<P>We recommend chocolate-<WBR>covered peanuts.

Compatibility

Supported by Netscape and Internet Explorer. Not supported by Mosaic or other browsers. For compatibility, NOBR and WBR are probably best avoided.

WBR is ignored by Pocket Internet Explorer.

Internet Explorer 3 recognizes WBR only within NOBR sections; it does recognize optional word-breaks or hyphen-breaks.

If WBR is used in paragraphs defined with style sheets, Internet Explorer 3 may lose the document's default font for subsequent paragraphs, using instead the formatting defined by the current style. Internet Explorer 4 corrected this issue.

Internet Explorer 4 correctly word-wraps hyphenated text, making the use of WBR after hyphens unnecessary.

Attributes are supported by MSHTML and Internet Explorer 4 or later.

MSHTML Attributes

ID, Language, Style, Title

  Related Topics

  Style Topics


XMP is deprecated in HTML 4. Use PRE.


XMP tag
 XMP, /XMP

Display text in fixed-pitch font; 2.0

Format text as an example, as plain-text in fixed-pitch type.

Example

<XMP>This is plain typewriter text
Each line is displayed separately
</XMP>

This is plain typewriter text
Each line is displayed separately

Notes

Each line must be 80-characters or shorter. Separate multiple lines with a line-break.

LISTING, PRE, XMP are similar tags. Use LISTING to display text in a smaller font.

Compatibility

Netscape ignores any special characters within a line of text. Internet Explorer interprets special character codes like &lt;.

Attributes are supported by MSHTML and Internet Explorer 4 or later.

The XMP tag is deprecated in HTML version 4.0; PRE is the recommended replacement.

MSHTML Attributes

Align, Class, ID, Lang, Language, Style, Title, events

  Related Topics

  Style Topics


Getting Started
 Start Here

This book is designed to be tight and navigable, with simple illustrations, concise references, and little superfluous information. How you use it is up to you.

Where to Next

There is no beginning or end; each topic is a separate article. Most topics include links to related articles. Learn by following your own path; here are suggested courses to follow:

For an overview of files included in this package and how to best use them, see Setup.

Start with Welcome to HTMLcat, which explains the purpose of this book.

This book is arranged simply; you can jump right in and browse any way you like without concern for how things should be. Stop by Help Tips for suggestions, a keyboard reference, and troubleshooting information.

Next, return here, and step through the pages in this section. See How do I for answers to frequently asked HTML questions. Contrast the design of that page with this simple monochrome page.

See Essential HTML Tags for a list of just the tags you need to know—this is really enough information to get the job started.

HTML is evolving. We've had ad hoc standards, de facto standards, and even ex post facto standards—and standardization committees that try to keep it all orderly. Keep an eye on the Compatibility sections, the " [image] " buttons, and version information. See Portability and Proprietary Tags, for discussions about when to avoid—and often when you should use—proprietary features.

The alphabetical tag list is half of this book. Early-on, step page-by-page through the tags references for a general overview of features; don't worry about trying to memorize every tag or attribute. Long after we're reading and writing HTML tags in our sleep, we still occasionally appreciate a reminder.

When it's time to add a little more flare to your Internet documents, Introducing Styles shows how.

References, such as Character Conversion, Color Swatches and Font Samples, are important tools for document designers. Color Experiments is an interesting side-trip. These sections will be useful for as long as we are concerned with color, design, and fonts.

Look through this book once just for document design ideas—we follow simple, open, consistent layout, plus occasional colorful accents. For more inspiration, look at HTML pages on the Internet. We have included some sample documents with this book (see Setup for a list of files). The best examples are found live, on the Internet; download, save, and review pages that appeal to your sense of style.

Return to this book frequently as you develop new skills.

You can get back to this page at any time by selecting the Start Here item in the Help menu.

  Articles

  About HTMLcat


 Introduction

HTML documents are text files that contain special codes, called tags, that describe how the documents should be displayed. The power of HTML is in the tags. Here is a page from a simple HTML document. Click on the illustration to see the HTML tags:

When a Web browser loads a document, it interprets the tags and displays the text. Simple tags tell the browser to change a color, to make text bold, and to insert pictures. More complex tags turn documents into all-singing, all-dancing, interactive multimedia extravaganzas.

About HTML Tags

Understanding the tags unleashes the power of HTML.

HTML documents and tags are text files—we can read and edit them with any text editor.

Tags begin with a less-than (<) symbol, and end with the greater-than (>) symbol. Anything between these characters is interpreted by the browser as a hidden tag; the tags are never displayed by the browser.

Most tags change the way things look or work. We use a tag at the beginning to change things, then the same tag again at the end, with a slash character (/) to stop the effect. This example tells the browser to display a passage of text in bold type:

<B>Pizza eaten before noon was probably made yesterday.</B>

Tags that work in pairs are called containers. The first tag turns on the feature, and all text until the next matching tag is within the container. Most formatting tags can be nested; this example shows bold text, with a single word in bold and italic:

<B>Pizza eaten before noon was <I>probably</I> made yesterday.</B>

Pizza eaten before noon was probably made yesterday.

Tag Notes

Extra white space characters, including spaces, tab characters and end of lines, are ignored. If you're used to putting two spaces after punctuation, don't bother, because they're ignored—you might as well put each word on a separate line. The browser interprets and displays a stream of characters coming over the line; blank lines or long lines look much the same, because extra blank space is ignored.

Any HTML tag attribute that contains characters other than A-Z, a-z, 0-9, _ or - must be in quotation marks, and the opening and closing quotes must be the same—you can use pairs of double (") or single (') quotation marks.

Always enclose file names and URLs in quotation marks.

No argument to an attribute within a tag can contain spaces unless they are placed within quotation marks.

For clarity, we always show spaces between attributes and arguments in tag examples in this book. This is for clarity only. For real-world HTML documents, we crunch it up tight, with just a single space between words—the minimum needed for browsers to be able to correctly interpret tags.

  Articles

  About HTMLcat


<HTML><HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY BGColor = "#FFFFFF">


<H1>Introduction</H1>


<P> . . . </P>


<CENTER><P>A centered paragraph...
</CENTER>


<H2>Topic n</H2>


<HR Width = "100%" Size = "1">


<BLOCKQUOTE>
<P>This is the first indented paragraph...</P>


<H3>Subtopic 1</H3>
<!-- Indented because it is in a BLOCKQUOTE -->


</BODY></HTML>


HTML Document
 The HTML Document

Writing HTML documents is quite unlike writing text with a word processor. What you see while editing has little relation to what the browser displays—and every browser will display the document differently.

HTML Document Sections

Your documents can be as simple or complex as you like, yet they all share two basic layout elements.

Document Head

The document begins with the HTML tag; this identifies the file type.

The first section begins with HEAD; tags within this section describe the document. The !DOCTYPE tag, required for HTML version 3.2 compatibility, identifies the document type, and META tags further describe the document to the browser.

The /HEAD tag marks the end of the section.

Document Body

The BODY section is the main document; this section contains all formatting tags and text. Within the BODY tag, attributes set the default colors for the document.

Finally, /BODY and /HTML mark the end of the document. In the HTML 3.2 standard, these closing tags are optional.

A Complete Document

The tags are flexible enough that we can be as expressive or direct as we like; HTML does as little or as much as we want.

<HTML><HEAD>
<TITLE>Document Title</TITLE>
</HEAD>

<BODY BGColor = "#FFFFFF"><FONT Face = "Arial, Helvetica, Swiss" Size = "3">

<H1>Introduction</H1>
<P>This is the introductory paragraph... </P>

<P><IMG Src = "plane.gif" Width = 400 Height = 200 Alt = "The company plane"></P>
<CENTER><I>Caption under the picture</I></CENTER>

<H2>Topic 1</H2>
<P>And now, we will discuss topic one...</P>

<UL Type = "SQUARE">
<LI>The first item in the unordered bulleted list...
<LI>Second item in the list...
</UL>

<HR Width = "100%" Size = "1">
<H2>Topic 2</H2>
<P>Let's change the subject to topic two...</P>

<BLOCKQUOTE>
<P>This is the first indented paragraph...</P>

<H3>Subtopic 1</H3>
<P>This is the second indented paragraph...</P>
</BLOCKQUOTE>

</BODY></HTML>

Reading and Writing HTML

Even if you use an HTML editor or word processor, being able to read and write HTML gives us the ability to add features not supported by our editor—and to correct features that the word processor just decides to do its way, instead of how everybody else works.

This is a key issue; if we can't read the tags, we cannot edit or ever truly hope to understand how HTML works.

Viewing HTML: Learn to filter what you see; when you're editing text, ignore the tags, and when you're adding formatting tags, look beyond the text—much like we've grayed the text in examples in this book to make it easier to identify the formatting. Many editors highlight HTML tags in contrasting colors.

Editing HTML: Develop a consistent, simple formatting style. Add white space and blank lines to separate parts of the document. Use consistent indentation to identify lists and tables. The best formatting style is the one that makes the document easier for you to read and maintain—not to make it pretty for others.

Keep documents short. If they're too long and complex to write and maintain, they're probably longer than you can expect anyone to read.

  Articles


HTML Document Sections
HTML documents begin with the head section, which describes the document. All text is contained in the body of the document.


 Portability

Best Viewed With

The HTML standard is designed for simple, platform-independent technical documents that display quickly and look good regardless of the operating system or display type. HTML encourages portable, flexible documents that can be viewed or printed by a variety of devices.

A handheld computer, for instance, may have a 4-color display of only 480x240 pixels, while a workstation may support millions of colors and millions of pixels, yet the page must be usable on both platforms. Standard tags are device-independent, which means the same document looks fine on any screen, at any resolution.

Portability Notes

Your reader may not be using a browser at all. The rendering device may be a printer, speech synthesizer, or Braille reader.

Clarity and readability are more important than clever design.

You can use FONT tags and TABLE tags instead of pictures for modern, fast, colorful documents. See Font Samples for examples of popular fonts.

Don't assume a fixed screen size. Some people use smaller monitors at high resolution for smooth rendering; others use large monitors at low resolution for increased readability.

Don't specify TABLE column widths as number of pixels. Use the percentage of the screen size, or let the browser resize the table automatically based on the width of the text.

The best way to see what works is to try it. When possible, download or purchase copies of several browsers—and not always the latest versions—and test every document. It doesn't have to look identical, but if it doesn't work at all, we are limiting accessibility to our work.

Design documents for the reader, not for writing convenience. Think of it as suffering for your art.

Use smaller documents. If you have a lot to say, use several documents. Download time, browser performance, and reader interest, suffer from large documents. Smaller documents encourage the free associations of true hypertext.

The best examples are pages you've visited, and like.

Compatibility Notes

Browsers ignore tags they don't understand. If you enter a code incorrectly, it will be ignored. If you use tags not supported by a browser, it will ignore the newer features.

Use new HTML features only if you truly need them.

Some special characters are reserved. The "<" character, for example, cannot be used because it has a predefined meaning in HTML documents. The Special Characters page shows codes for entering reserved or international codes. Special icons replace commonly-used pictures; see Icon Symbols for a list of these special graphics.

Use only the 216 Web-safe colors. See Introducing Color for suggestions, and Color Swatches for illustrations of these colors.

Avoid tags marked with " [image] " icons in this book. Some are outdated; others are proprietary and nonstandard.

Many surveys show that 8-10 percent of Web users do not use the most popular browsers.

Some feel that HTML should define a high-level, highly-abstract format that allows the writer to specify complicated information with simple tags, and let the browser try to make it pretty.

  Articles


Portable HTML Logo
If our documents look good everywhere, they're accessible by everyone. Flexible documents are open invitations. Look for this logo in the file ANYTHING.GIF on the disk with this book—you can use it in your portable documents free of charge.


How do I...
 How do I

 Decide where to start

 Edit the HTML document

 See changes while I edit

 Decide what files to create

 Learn just enough HTML—and no more

 Make good looking documents

 Create a boilerplate document

 Make sure the document has a white background

 Change the background color

 Indent paragraphs

 Indent the first line of a paragraph

 Add blank lines

 Create a picture

 Add a background picture

 Decide between GIF and JPG pictures

 Eliminate extra space around pictures

 Find the size of a picture

 Make pictures with transparent backgrounds

 Align pictures in tables

 Use interlaced pictures

 Use PNG pictures

 Insert © and other characters

 Insert < or > characters

 Draw lines

 Draw vertical lines

 Create links to another document

 Change the color of links

 Remove extra space after headlines

 Start a Table

 Word-wrap hyphenated text

 Use hot spots in pictures

 Change the default font

 Create lists

 Make quick, simple charts

 Add extra space between list items

 Make sure they read my documents

 Make pop-up descriptions for anything

 Use style sheets

 See the document without styles

 Make multiple-window documents

 Get rid of multiple-window documents

 Make text in forms word-wrap

 Automatically jump to another document

 Make sure my documents look good everywhere

 Play sounds

 Support readers who have disabilities

 Show a banner on the status line

 Use OnMouseOver

 Embed fonts

 Calculate download times

 Improve performance

  Articles


 Decide where to start

HTML is a standard. It is the basis for more advanced document layout tools that will be popular for many years. This is core knowledge that will serve you well.

If your needs are small, such as a page or two updated occasionally, consider one of the many inexpensive or free HTML editors; unless you are highly-motivated to create custom, highly-stylized documents, learning HTML may not be worth your time. If you're detail oriented, you will want to review and edit documents after the HTML editor has had its way with them.

If you want to customize documents created by your HTML editor or you want to create the most efficient, portable, custom documents possible, you've really no choice but to learn to use this important tool. Start by reading the articles in this book. Then look at documents you like, keeping this book by your side for reference. Finally, experiment and have fun.


 Edit the HTML document

HTML documents are plain text—a few < and > symbols are all that separate them from the simplest text files.

Unlike word processors and computer programming languages, HTML doesn't require fancy editors or compilers. You can use the simplest text editor to get started—that's all many ever use. A sophisticated HTML editor makes it easy to maintain large, complex, heavily-formatted documents.


 See changes while I edit

Many HTML editors offer preview modes that display text as you to edit in pretty much the same view as a browser—an old, clunky, slow browser. And no two browsers show documents the same way.

While your HTML editor is still running, load the saved document in your browser, or better yet, two or more dissimilar browsers—get enough memory for your computer so that you can run several browsers at the same time (perhaps 8MB extra per browser). Whenever you make a major change in the HTML editor, save the document, then click the reload button in the browser. See Web Sites... in the Edit menu for where to find some popular browsers.


 Decide what files to create

The reader's convenience is more important than ours. Organize like a book—but not a mystery novel. Always start with a small home page. Each document is a chapter.

The more files you have, the more you have to maintain. Use simple, consistent design on every page—you may want to start with a standard boilerplate document. Style sheets make it easier to update just one document to change the appearance of your whole Internet site.


 Change the background color

Most—but not all—browsers display text on a light gray background. Use the BODY tag's BGColor attribute to specify your custom background color.

If you've created a document with, say, a light blue background, but you want most text displayed on a white background, place the text in a TABLE, and use the BGColor attribute with the TD tag to color the background of just a single table cell.

You can create a document that uses different colors with late-model browsers by specifying the Style attribute with the BODY tag. For example, if you use light text defined with a style while the default background color is light, use a style to change the background color.


 Create a picture

The free paint program furnished with Windows cannot edit GIF or PNG pictures. The latest releases can read JPG pictures, but they cannot write JPG. Internet pictures require a paint program that can write GIF files. The JPG, and perhaps PNG picture files are less important.

JPG and GIF are standard Internet picture formats. JPG pictures use lossy compression, which makes them suitable for large, low-resolution, high-color photographs. GIF pictures are loss-less, for more faithful reproduction quality, but 256 or fewer colors. Most small to medium size pictures are ideally suited to the GIF picture format.

Always display pictures with IMG, loading the picture directly. If you accidentally load the picture as a document, the browser may display the binary data, not the picture!

See Introducing Color and Introducing Pictures.


 Insert < or > characters

These characters are always reserved in HTML documents. But you can enter the characters with special codes. Use &lt; [image] and &gt; [image] (which mean less-than and greater-than):

<P>Press &lt;Enter&gt; to continue.

See Special Characters for more special codes.


 Draw lines

Lines can be horizontal rules, table borders, or pictures. Use HR to draw horizontal lines, either flat or 3-dimensional. Occasionally, we want a thin vertical line. We can use a tall narrow picture in a table, or define a table column in a contrasting color.

Some browsers recognize the Rules attribute with TABLE, to change individual cell borders. Use TBODY, TFOOT and THEAD to specify the portions of the table. Or, use a colorful narrow column or row in a table as a line.


 Create links to another document

Specify the fully-qualified URL with the A tag Name attribute. This means using just the file name if it is a local file, or the complete URL if it is not.

<P><A HRef = "document.htm">

To jump to a hyper-link within a document, specify the file name, a pound sign (#), and the name specified by the A Name attribute within that file. The browser will load the document, then move to the portion of the page containing the A tag and matching Name attribute.

<P><A HRef = "document.htm#Label">


 Change the color of links

Use the BODY tag's Link and VLink attributes. Avoid using non-standard colors, or your readers may have trouble figuring out where to go next.

You can also change the appearance of links with styles. This example turns-off underlines:

<STYLE TYPE = "text/css"><!--
A: link, A: visited, A: active {text-decoration: none}
--></STYLE>

Warning: using styles to turn off underlines may cause the page to display slowly. Only use this effect on pages that have few links.


 Change the default font

The BASEFONT tag changes the appearance of fonts, including how they look in tables, but it doesn't change the font face in Netscape.

If you are not using tables, the FONT tag changes the all text that follows. Be sure to use /FONT before changing the font again (some browsers get confused).

If you are using Netscape, you must use FONT or a style within every TABLE cell.


 Create lists

There are two standard kinds of lists. The easiest, and yet very attractive, method is to use the UL tag to create bulleted lists. If you need numbered lists, try OL. If all you want is short, plain lines without bullets or extra spacing between lines, use standard paragraphs (P), and end each line with BR.


 Make multiple-window documents

Most documents that show multiple boxes on one page use colorful tables, not frames. Use TABLE to create a multiple-column table.

If you need real frames, such as for a table of contents window, create a document that contains the FRAMESET and FRAME tags. You can use the same documents with or without frames by carefully specifying the Target attribute for each A tag. Look for the files FRAMES.HTML and FRAMENDX.HTM, furnished with this book, for a boilerplate framed document.


 Get rid of multiple-window documents

Visitors to your document may be stuck within frames; this often happens when others want to reference your documents, but with the appearance of still being at their Internet site. You can add an A link that references your document, with the Target attribute pointing to _top, something like this:

<A HRef = "home.htm" Target = "_top">No Frames!</A>

A more complex method, using META to eliminate frames, is shown in the Notes section of BASE.


 Improve performance

You would think the key issue is small file size, but that's just half of the solution. After all, the documents must be large enough to contain useful information.

• Make your home page as small as possible. Use just enough pictures to keep reader's interest. Try to keep the page under 10KB—including pictures—so that it loads in just a few seconds. If it's too big, many won't wait to see how good it is.

• If you use large graphics in tables, use a small table at the top of the page so something is displayed while the rest of the document loads.

• Use additional documents for important content—if you warn ahead of time, important documents can be quite large.

• If you use a background picture, make it smaller than 4KB. Don't use interlaced pictures for backgrounds.

• Avoid unnecessary scripts.

• Optimize pictures, and keep them small. Eliminate dithered patterns, and reduce the number of colors in pictures.

• Specify the Height and Width with IMG tags.

• Don't use elaborate tables. Don't nest tables. Avoid using pictures within tables.

Good performance requires more than just minimizing Download Time. Use simple designs without superfluous design elements or tables, minimize large illustrations, reuse graphics.


 Learn just enough HTML—and no more

Take a look through the pages of Essential HTML Tags. This topic lists just enough HTML tags, without requiring you to learn and read this whole book.


 Calculate download times

Figure just 1-2 KB per second, including documents and graphics. This is optimal performance for a 14.4 modem; in the real world, download performance is dependent more on network traffic than Internet connection speed.

The larger the document, the less likely readers are to wait. Another way to look at it is that one percent of readers will leave for every kilobyte of document size.

Refer to the Download Times table.


 Add blank lines

Often we need to add extra space between sections for emphasis or to add a blank TABLE cell. HTML ignores extra blank lines in the document. We use tags to add blank space.

Most browsers ignore extra P and /P tags if the paragraphs contain no text. You can work-around this problem by putting a non-breaking space on the blank paragraph:

<P>&nbsp;</P>

Another method is to use pre-formatted text. See the PRE tag for an example.


 Make text in forms word-wrap

Text in forms seems to wrap at times, and run-off the right border at others. This is because many browsers handle the TEXTAREA tag differently. Most browsers do not, by default, word-wrap; some versions of Internet Explorer default to word-wrap. Force word-wrapping by using the Wrap attribute with the ON, PHYSICAL, or VIRTUAL value:

<TEXTAREA Wrap = ON>


 Indent paragraphs

Use the BLOCKQUOTE tag to indent large blocks of text. Be sure to use /BLOCKQUOTE after the final indented paragraph.

Some versions of MSHTML do not indent horizontal lines (HR) that appear within a BLOCKQUOTE section. Netscape 4 does not correctly calculate TABLE widths within a BLOCKQUOTE section. Early Mosaic does not allow multiple nested BLOCKQUOTE sections. Finally, some early browsers display indented text in italic type.

Indent long sections by placing everything within a TABLE. You can add wide margins to the whole document by using the LeftMargin and MarginWidth attributes with the BODY tag.


 Support readers who have disabilities

Internet accessibility is for everyone.

• Limit the size and number of graphics. If you use a background, make it light. The page must be usable with graphics turned off.

• Use a caption on every graphic.

• Don't use frames.

• Use readable text. Use contrast in colors and fonts.

• Avoid using red and green for visual clues; about six percent of readers are partially color blind.

• Use bulleted lists; end each line with a period.

• Keep line width short—no wider than six-inches. Long lines of text cause eye-tracking errors and lower comprehension.

• Always begin table cells with the P tag. This makes sure that browsers that don't support tables (such as Braille readers) will recognize your documents.

• Don't use image maps. Use separate pictures for each link. Always provide text-only links.

• Use Alt attributes with pictures and Title attributes with links.

• Don't use Alt attributes with filler pictures and bullets.

• Always provide links to get back to the home page.

• Don't hard-code the screen width; every page must be re-sizable.


 Make pictures with transparent backgrounds

These are transparent GIF pictures. Use a paint program that supports the GIF89a file format—GIF87 won't do. You can also use PNG pictures. Make the picture just as large as necessary, and use a unique color for all the areas you want to appear transparent. When you save the file, look for a Transparency option.


 Use interlaced pictures

Create the picture in a paint program that supports the GIF89a file format, and select Interlaced when you save the picture.

Very large GIF pictures may take a long time to display. Non-interlaced pictures are displayed a line or two at a time, making the time seem even longer. Interlacing means the whole image is displayed in steps, beginning with a coarse rendering as soon as enough has been loaded, and more detail as the rest of the picture is received.

While the impression is that the interlaced picture displays faster, it may not, especially on slower computers or relatively fast Internet connections, because the extra overhead of displaying the picture several times. If the illustration is very large, highly-compressed JPG may be a better option.

Try using the LowSrc attribute to IMG—it doesn't even have to be the same picture. The browser will load small picture with LowSrc, then replace it with the picture specified by the Src attributed.


 Make good looking documents

Find several documents you like, without concern for why you like them. Load them in your browser—you may want to open several browser windows—then switch among the documents and note the similarities. You will probably notice that they share a few design ideas. Documents we like use consistent themes and repeated design elements—the style of the document.

• Use consistent design elements.

• Use tables, usually without borders, to align objects.

• Use a white background for the main document. Use color backgrounds (in tables) behind objects for impact.

• Use just a few complementary colors.

• Use headlines (H1) to introduce new sections.

• Use just two fonts—one serif, one sans-serif. Never use two different seriffed fonts in the same document.

• Balance the page. Stand back, if it looks like the monitor is tilting to the left, maybe the document has too much emphasis on the left border.

• Know your topic. Each document discusses one topic—if it doesn't have a topic, design doesn't matter.

• Let it evolve and grow.

• Find a consistent style.


 Remove extra space after headlines

Text formatted with the H1 tag is always followed by a blank line. One work-around is to start a new paragraph, then use the FONT tag to format text as a headline; use the BR tag to start a new line without any extra space. This example uses BIG to enlarge the font, and the B tag to make the headline bold:

<P><BIG><B>Headline Text</B></BIG>
<BR>Paragraph text...


 Make sure the document has a white background

Most browsers display documents on a white background, while others use a light gray background. In order to ensure that the background is always white, use the BODY tag's BGColor attribute to specify the background color.

<BODY BGColor = "#FFFFFF">


 Add extra space between list items

Most browsers display items in bulleted lists (UL) close together. You can add extra space by placing /P at the end of list items.

<UL>
<LI>Item 1</P>
<LI>Item 2</P>
<LI>Item 3</P>
</UL>


 Eliminate extra space around pictures

Some high-level HTML editors add space around pictures with the intention of keeping pictures from running-into text. When you need accurate picture alignment, use the IMG tag's Border attribute to eliminate the extra space.

<IMG Border = 0 Src = "picture.gif">

The Border attribute also stops the Browser from displaying a blue border around pictures used as A links.


 Align pictures in tables

Pictures are often centered in tables. If all pictures are not the same size, they will not align correctly. You can correct the problem by using the Align = LEFT attribute to the TD tag, and avoid using the Height attribute with the TABLE tag.

Some high-level HTML editors insert a fixed-space in table cells; this can affect alignment of pictures in the table. Look for and remove unnecessary &nbsp; codes in table cells.


 See the document without styles

Most browsers support style sheets. For testing, we often need to see how the document looks on older browsers that do not support style sheets.

You can use a browser that does support styles to see how a document will look on a browser that does not support styles. First, make sure all important style elements are defined in a separate style sheet, and when it's time to view the document, either rename or move the style sheet to a different location—when the styles are not available, the browser uses default formatting.

It is also important to see how documents look without styles in case the reader downloads a copy of the document from the Internet, but does not download the style sheet.


 Make quick, simple charts

Use multiple-column tables to make horizontal bar charts. Contrasting background colors and the TD tag's ColSpan attribute make it easy. See the TABLE example.

You can also scale the size of pictures using the Width and Height attributes and the IMG tag. For an interesting effect, try using repeating pictures, such as a row of ducks, as charts.


Essential HTML Tags - Character
 Essential HTML Tags

This is just enough HTML to get the job done. These essential tags are enough to create powerful, attractive documents.

Essential Character Tags

B	 Bold type. Always use /B to turn off bold.

BIG	 Display text one size larger. Use /BIG to return to normal size.

EM	 Emphasized text. This is a portable way to display text in italic. The /EM tag turns off emphasized text.

FONT	 Display text in the specified font name, size and color. Use /FONT to return to the default font.

I	 Italic. Display text in italic type. The /I tag turns off italic.

SAMP	 Small, fixed-pitch type. Use /SAMP to return to the standard font.

SMALL	 Display text one size smaller. Use /SMALL to return to normal size.

STRONG	 Strong text. A portable way to display bold text. The /STRONG tag returns to normal type.

Best Viewed With

  Articles

  Style Topics


Essential HTML Tags - Paragraph
 Essential HTML Tags

Essential Paragraph Tags

P	 Start a new paragraph. Use the /P tag at the end of paragraphs to ensure that additional space is added following the text.

BR	 Start a new line of text. The BR tag tells the browser to stop formatting on the current line and begin on the next line. Unlike the P tag, BR does not add extra space following the current line.

H1, H2...	 Format a paragraph as a section heading. Headlines, often called headings, are similar to default heading styles in many word processors. Text is displayed in large type, usually bold. Always mark the end of the headline with the closing /H1 tag.

HR	 Horizontal rule. The HR tag draws a horizontal line across the page. Usually used to separate sections within a document.

BLOCKQUOTE	 Indents the left and right margins. Use /BLOCKQUOTE to return to left-aligned text.

CENTER	 This container tag tells the browser to horizontally center text on the page. While you can use the Align attribute with the P tag, CENTER works with blocks of paragraphs and pictures. Use /CENTER to return to left-aligned text.

PRE	 Display text in a fixed-pitch font. This flexible, versatile tag makes it simple to convert pre-formatted text files to HTML documents by adding only a minimum number of tags.

Best Viewed With

  Articles

  Style Topics


Essential HTML Tags - Document
 Essential HTML Tags

Essential Document Tags

HTML	 Mark the beginning and end of an HTML document. Placed at the beginning of every document, the HTML tag marks it as an HTML file. The /HTML tag is the last thing in every document.

HEAD	 The HEAD portion of an HTML document contains tags that describe the document.

TITLE	 Specify the document window title. Usually displayed at the top of the browser window, TITLE contains the text that describes the document to viewers and search engines.

BODY	 Marks the main document body. You can also specify design elements, such as colors, that modify the appearance of the document.

A	 Anchor tag or reference an anchor. Anchors, commonly called links, mark hyper-link references. The A tag is the backbone of a hypertext document; it gives the user a way to jump to the referenced text. The A tag also defines these references. Link can reference the same document or another HTML document.

IMG	 This tag inserts bitmap pictures in the document. Instead of combining text and pictures, we keep pictures in separate files, and reference them with IMG.

Best Viewed With

  Articles

  Style Topics


Essential HTML Tags - List
 Essential HTML Tags

Essential List Tags

OL	 Ordered lists contain groups of sequentially-numbered items. The Type attribute specifies the list type: numeric, alphabetical, or Roman numerals. Use /OL at the end of the list.

UL	 Called unordered lists, the UL tag creates simple bulleted lists. Use /UL at the end of the list.

LI	 Begin the list with OL or UL, then use LI to start a new item in a list.

Best Viewed With

  Articles

  Style Topics


Essential HTML Tags - Table
 Essential HTML Tags

Essential Table Tags

TABLE	 Define a table. Tables are the backbone of modern HTML page design; in addition to displaying tabular data, they are used to define multiple-column documents and change background colors within the page.

TR	 Create a row in a table.

TD	 Create a cell in a table within the current row.

Best Viewed With

  Articles

  Style Topics


Internet Explorer
 Proprietary Tags

Best Viewed With

Writing HTML code looks easy—after all, there are only about 125 tags. The difficulty is writing documents that display correctly on most browsers. No matter what you do, your carefully crafted documents will look different in virtually every browser.

With inventions, discoveries, products, and competition changing daily, so do standards. HTML is evolving; internationalization, Multimedia, scripting, style sheets, printing, and accessibility for users with disabilities, ensure that we will continue to see changes.

Regardless of all how great the latest features may be, most readers are likely using the browser that their Internet service provider, or operating system upgrade, gave them.

Standards

When a new standard tag or attribute is proposed, it is discussed by a committee that decides if the spirit of the standard is enhanced by the addition, or if it is merely interesting. A wonderful goal is to keep HTML from becoming proprietary; if it takes a million lines of code in the browser to implement a feature, perhaps it's not a good idea, because only a few will be able afford the development cost. While a feature may become standard, the cost of implementation may be so great that the feature will be supported only by a few browser designs.

As time goes on, new documents will support new tags and require newer browsers. Millions of simpler, older documents will be available for many years; browsers will have to be able to read and correctly format these legacy documents.

The HTML standard is simple, to make it possible to write and maintain browsers as well as to make reading and writing the source document possible. Extra complexity means that it will be difficult or impossible to write new browsers for new or less-powerful computers. Surely, tags like BLINK and MARQUEE will not become standard because of the design complexity and truly limited usefulness.

Perhaps some enhancements are destined just for one platform, and cannot ever become standard. The best solution may be to support proprietary features when they add value or functionality.

  Articles


HTML Colors
 Introducing Color

Unless we do something about it, HTML documents present our ideas in black and white—or worse yet, in a black and gray world. On this page, we introduce how computers use color.

Computer Colors

Black is, of course, the absence of color, but white is the presence of all colors. Computer colors are created by mixing different intensities of red, green and blue—the three primary colors. Combining just the three primary colors creates every visible color.

Each pixel on computer monitors is made up of red, green and blue (RGB) color dots. When we mix colors, we are telling the monitor how bright to make the red, green and blue dots for each pixel.

If all three colors in a pixel are full-intensity, the pixel is white; if all are off, the pixel is black. If we turn off, for instance, the blue dot, the red and green colors combine to make yellow—white minus blue is yellow.

When we use color in our documents, we are mixing colors.

This color wheel looks different than the colors we first saw in elementary school. We learned that red, yellow and blue were the primary colors—which works well when mixing pigment on paper. In the visual world, the color spectrum defines the primary colors; we mix different intensities of light in just three colors for all colors in the visible spectrum.

See About Color Printing.

This background is all we need to know to customize colors in HTML documents. Colors are represented by three numbers that specify how bright the red, green and blue dots are.

HTML Colors

We identify colors by name or as RGB Hex-triplet values in arcane hexadecimal (hex) notation, or occasionally as color names.

<BODY BGColor = "#FFFFFF">
<BODY BGColor = "WHITE">

Colors are 24-bit values (six hex digits), with one 8-bit byte for each color. Each of the three colors is independent, represented by two of the six hex digits. This table shows brightness (intensity) in the first column as percentages, followed by red, green and blue color columns.

The higher the hex value, the brighter the color looks on the screen. The brightest color is 100-percent of 255, which is FF in hex.

RGB Hex-triplet color values can represent more than 16-million colors (256x256x256 = 16,777,216). There's really not much difference between #333333 and #343434, but they are unique values.

Unfortunately, many computers cannot display 16-million unique pure colors, and when they cannot, they substitute an approximate color by a process called dithering.

Dithered Colors

Color is cool, but when the user's display shows 16- or 256-colors and your carefully-crafted graphics require two million colors, something has to give. Browsers dither to represent many colors with just a few.

Dithering sets the color of two or more adjoining pixels to create a new color. When we stand back far enough from the screen, our eyes blur the pixels together, and the pixels look like a single color spot, midway between the two colors. At high resolution, the effect is nearly undetectable. In high-color video modes, the following illustration shows 26 unique colors; on 16-color screens, the image is dithered, mixing just a few colors.

Even if you view a document in a browser that displays just 256 or 16 colors, colors still approximate the original. Here is how the image looks on a 16-color screen:

The first picture is a 24-bit color drawing. If you are looking at this page with a 256-color or 16-color display, you will notice that the two pictures, while both dithered, look different; this is because the help viewer usually dithers by creating patterns, while some programs mix colors by scattering randomly-spaced pixels.

Dithering colors makes it possible for computers that can only display a few colors, to emulate a full-color palette. The following illustration, using just a 16-color palette, shows subtle gradations with smooth textures. Click on colors to see the RGB color codes:

HTML Color Names

Late-model browsers recognize colors by name as well as by hex codes. Especially useful in style sheets, color names make documents more readable, but not necessarily easier to write—who wants to have to look-up the exact spelling of MediumSpringGreen each time?

This illustration lists the 16 standard Windows colors supported by most browsers and by style sheets. Click on a color to see the hexadecimal equivalent:

Here are the 16 basic color names and hex values:

Black	Maroon	Green	Navy
#000000	#800000	#008000	#000080

Gray	Red	Lime	Blue
#808080	#FF0000	#00FF00	#0000FF

Silver	Purple	Teal	Olive
#C0C0C0	#800080	#008080	#808000

White	Fuchsia	Aqua	Yellow
#FFFFFF	#FF00FF	#00FFFF	#FFFF00

Note  You will probably want to identify colors by the numbers, not names, because not all browsers recognize color names. Computers running less than 24-bit color modes represent all named colors beyond the basic 16 with some dithering. Compatibility is a recurring theme: writing HTML documents so that just about any browser can make some sense of it.

If you want to use colors by name, Color Names lists names supported by Netscape and Internet Explorer.

Web-Safe Colors

We can avoid dithering by using only standard colors. Called Web-safe colors, we use only six intensities of each of the three RGB colors— 0, 20, 40, 60, 80, and 100 percent intensity (6x6x6=216). Percentages are represented in hex as 00, 33, 66, 99, CC and FF, so bright red is #FF0000, not-so-bright red is #CC0000, hardly-red-at-all is #330000, and black is #000000.

Use no more than 216 colors when you may be displaying more than one picture on a page, and the monitor may be running in 256-color mode. Otherwise, the browser will be unable to display all colors used in every picture, and it will substitute unexpected colors. If you use too many colors, the screen may flash (Palette flash) as the browser adapts the video palette to display each new picture.

See Web-Safe Color Swatches for samples of all 216 web-safe colors.

Note  Some illustrations in this book use more than 16 colors. Computers displaying lower than 16-bit color mode will show noticeable patterns, or dithering, as colors are converted to standard colors. The two rainbow illustrations may not be the same size on all displays.

  Articles

  About Color Printing


This illustrations shows 26 unique colors. In 256-color video mode, some similar colors may be represented by the same color; for instance, shades of green may all be shown as the same green. In 16-color mode, the colors are dithered.


This illustration shows color dithering. Scattered patterns of just a few colors blend to emulate the 26 unique colors. At high resolution, the dithered patterns are nearly invisible.


 About Color Printing

Side-effects of mixing color pigments still require us to use more than three colors when printing. Printing usually begins with cyan, magenta, yellow, and black inks (called CMYK), and we often use additional ink colors for vibrant colors or subtle tones. Printing still has the same limitation as color computer displays: limited dynamic range; the world is made of much brighter and more intense colors than we can ever reproduce on paper or a computer screen.

In the art world, yellow and blue still do make green—although it's kind of muddy. The artist's palette includes many unique colors made of dyes and pigments that cannot easily be mixed from pure primary colors—even green.


The background of this window is white because all three RGB color dots are full-intensity. A black mask separates each dot. High-resolution screens may use more than three color dots for each pixel.


The magnifying glass covers a small section of the screen, and the lower-left of the letter H.


This magnified view shows the color dots and the black mask. Notice that the dots in the middle of the image are darker where the bottom of the letter H falls within the view.


#000000 Black


#800000 Maroon (dark red)


#008000 Green


#000080 Navy (dark blue)


#808080 Gray


#FF0000 Red


#00FF00 Lime (light green)


#0000FF Blue


#C0C0C0 Silver (light gray)


#800080 Purple (dark magenta)


#008080 Teal (dark cyan)


#808000 Olive (dark yellow)


#FFFFFF White


#FF00FF Fuchsia (magenta)


#00FFFF Aqua (cyan)


#FFFF00 Yellow


#191919 10% intensity


#333333 20% intensity


#4D4D4D 30% intensity


#666666 40% intensity


#999999 60% intensity


#B2B2B2 70% intensity


#CCCCCC 80% intensity


#E5E5E5 90% intensity


#A0A0A0


#DFDFDF


#400000


#C00000


#FF4040


#FF8080


#004000


#00C000


#40FF40


#80FF80


#000040


#0000C0


#4040FF


#8080FF


#004040


#00C0C0


#00E0E0


#80FFFF


#400040


#C000C0


#E000E0


#FF80FF


#404000


#C0C000


#E0E000


#FFFF80


Dithered Colors

This 16-color picture mixes colors in patterns to simulate dozens of unique-appearing colors.


 Applying Color

Color adds emphasis, interest and variety; too much color—or the wrong color—and our documents become advertisements for clown colleges. Adding superfluous graphic elements, such as we have in How do I, may result in an attractive, compelling, memorable design, or a distraction that lessens the impact of the document. It's a matter of taste.

Several important HTML tags support custom colors; attributes in BODY, HR, and TABLE elements change background colors, while FONT changes text color. In addition, IMG inserts a picture—even black and white—in the document.

Color Schemes

Warm or cool, hip or sophisticated, the colors we choose convey the purpose and attitude of the document. Here are some color themes, each using just a few colors:

 Formal	 Business	 Academic

 Traditional	 Casual	 Personal

 Teletype	 Day-glow	 Dramatic

Muted, subtle variations evoke a business-like attitude; strong soapbox colors forcefully make a point. Rather than a haphazard pile of found pictures on our favorite background color, color combinations evoke an impression of the document—and us.

Select a color scheme with a few similar or complementary colors. Using a color wheel, notice that colors close to the one we want, or on the opposite side, are usually pleasant combinations. For example, yellow is on the opposite side of the color wheel from blue; if our document is primarily blue, a few yellow highlights add impact.

In this book, we have emphasized cyan and magenta. To keep color from overwhelming the reader, we use large blocks of white or gray. We avoid large blocks of bright colors. This simple color scheme is easy to read for prolonged periods.

Most people expect text to be a dark color, displayed on a light background. One popular Internet site uses a black background with bright red text. Color isn't free—overuse costs readers.

Contrast

A subtle, well-designed background with soft pastel text can be breathtakingly beautiful—and at the same time eye-wateringly painful to read. Contrast—the difference in intensity of adjoining design elements—adds visual edges that enhance the apparent sharpness of objects.

Many carry-over the same design ideas from paper to HTML documents. The primary design difference is size; paper is expensive, so we try to fill it—or we try to balance the weight of the page. HTML documents are continuous—we have no way of knowing how they will be displayed, or how large the margins are. We balance the look of the document by using contrast—dense or dark areas, and open light sections. White Space is an effective—and free design effect.

Spot Color

Accenting with color does not mean splattering color all over the screen. Small accents like bullets or a company logo add interest without distraction.

 Use Spot Color

We use lots of spot color elements in this book. Compare the use of spot color on this page with the monochrome design of Start Here. If we were to introduce one color element on that page, such as a red ball, it would overpower the page. But the black and white design is simple, soothing, and sophisticated. Using color doesn't mean replacing black and white with other colors—black and white are colors, too!

Color Compatibility

Avoid using color names, because they are supported only by late browsers. Internet Explorer does not recognize several color names; Netscape 1.0 does not recognize color names at all. See Color Names for a list of color names and compatibility.

Select color combinations for color blindness. Many cannot distinguish red from green.

Documents adapted for sight-impaired readers are also legible on black and white screens.

Font colors, set with the FONT or BODY tag, should be pure colors, so they are displayed accurately on any browser.

White Space is an effective—and free design effect.

When using color backgrounds, always use contrasting text.

On dark pages, consider using larger or bold text. Text that is a single-pixel may be difficult to read on a dark background.

Not every document has to share the same color scheme. Use care, however, that changing from one page to another is not an eye-popping experience. A red page adjoining a green page, a bright yellow page next to a black page, or a beige page with a day-glow page may prove memorable for the wrong reasons.

Colors defined by BODY, FONT and the BGColor attribute used by several tags look different depending on the type of computer. Macintosh, Windows, network computers, LCD (Liquid Crystal Display) and televisions display colors slightly differently.

  Articles


Demo - No, it's not hiding here. It's only a few dollars, so why not just buy it?


 Color Names

Click to copy a color code to the Clipboard. These keyboard keys modify the results:

Key	Purpose

ALT	Convert to Web-safe color. Use this option to find the color that is closest to the Netscape named color.

CTRL	Convert to pure (non-dithered) color. Open the Clipboard Viewer to watch color values change between dithered and pure. About Dithered Colors.

SHIFT	Change the top of this window to the color.

This is just a short sample of the colors available. The complete color list, with all 139 names and colors, is included when you register. There is also a list of MSHTML system color names. And we'll explain what the "‡" and "§" symbols next to some colors mean.

  Articles

  About Dithered Colors


Demo - No, it's not hiding here. It's only a few dollars, so why not just buy it?


216 Web Safe Color Swatches
 Web-Safe Color Swatches

Click to copy a color code to the Clipboard. These keyboard keys modify the results:

Key	Purpose

ALT	Convert to Web-safe color.

CTRL	Convert to pure (non-dithered) color. Open the Clipboard Viewer to watch color values change between dithered and pure. About Dithered Colors.

SHIFT	Change the top of this window to the color.

This is just a short illustration of the colors available. The complete color swatch chart, with all 224 colors (plus 16 VGA colors), is included when you register.

  Articles

  About Dithered Colors


About Dithered Colors

Colors are accurate only in high-color (24-bit) video modes. Colors are dithered in most color modes, much as they are shown in browsers. If you switch to another program then back to this book, colors may be rendered incorrectly; move to another page then back to this page to restore the correct colors.

When you hold down the CTRL key to convert swatches to pure colors, we check the current color mode. If the display shows more than 16-bit color or fewer than 4-bits, we use an algorithm to calculate a pure color. All colors are pure in 24-32-bit color modes, which is a problem when we want to know about dithering. In 4-16 bit color modes, we use true pure colors. See HTMLCAT.DLL version information to find out more about the current video mode.


 Color Experiments

AaBbCcDdEeFfGg

AaBbCcDdEeFfGg

AaBbCcDdEeFfGg

AaBbCcDdEeFfGg

Click on the rainbow or buttons to experiment with color combinations.

Some color combinations make it nearly impossible to read text if the reader doesn't load the background picture. This also happens with light color text within a table that has a dark background, when the browser doesn't support table color (such as Netscape 2), or perhaps doesn't support tables at all (such as early Mosaic). Text color should contrast with the document's default background color.

Note  Color selections you make on this page stick! Select a pleasing background color before moving to another page in this book. Clicking the Back button may also restore the default gray color.

  Articles

  About Dithered Colors


 Introducing Pictures

Illustrations add depth and variety to all documents. This book, for instance, uses more than three thousand pictures. Not all pictures are illustrations or navigation aids. Some are purely decorative. You will notice consistency; the same pictures are used for similar purposes throughout this book. Reusing pictures also reduces the size of this book, because only one copy of each picture is required.

We use pictures in our HTML documents in much the same way: illustration, navigation, and decoration. And we reuse Internet pictures to minimize download times. Pictures are not part of our HTML documents; they are stored in separate picture files. When the browser interprets an IMG tag in the document, it loads the picture and stores it in its cache in memory or on disk. If we use the picture again in the document, such as a colorful bullet, the browser does not have to load the picture again.

Pictures are freedom of expression; they are our personal signature. But what happens if the browser doesn't support that kind of picture, the reader has pictures turned off, or the picture was lost in the ether? What happens when the picture isn't there? For every picture, we include text descriptions. The text doesn't replace or repeat the same information in the picture, it enhances the picture. If the picture isn't there, the text is. The Alt attribute of the IMG tag describes the picture if it's missing, and provides a pop-up caption if it is displayed.

Adding Pictures

Create the picture; it may be original art, a photograph, or modified clipart.. Usually, we edit and save the picture in the file format preferred by the bitmap picture editor, not in a Web file format, with full-color and resolution, then reduce the image quality only when we have to. Your bitmap picture editor may use the file extension BBM, BMP, CEG, CGM, DIB, FPX, GOO, LBM, MAC, PCD, PCT, PIC, PSD, PSP, or something else.

Now is the time to correct the color, remove distracting artifacts, and clean-up the image. Scale the picture to the size you need. Crop unnecessary space from around the edges of the picture. If it's a scanned picture, it may be crooked or have extra borders around the image. Make sure the picture looks-into the frame; if you will use it on the left of the page, make sure it looks right, on the right side, make sure it looks left—use your bitmap picture editor to flip the image if needed.

Convert the picture to GIF, JPG or PNG. Make sure you have a backup copy of your original picture, then use the file-export, or file-save-as command in your bitmap editor.

Use the IMG tag to link the picture to your HTML document. The Src attribute specifies the name of the picture. The Height and Width attributes tell the browser the size of the picture, to help it display the page quickly.

Pictures as Links

Anchors and links are the backbone of a hypertext document. Pictures are natural, simple ways to create intuitive links.

<A HRef = "document.htm"><IMG Src = "logo.gif" Width = 30 Height = 24 Border = 0></A>

The A tag is the link. The IMG tag tells the browser to use our picture as the link. When the reader clicks the picture, the browser loads the document. When you use pictures as links, be sure to offer text equivalents.

<A HRef = "document.htm">Load document</A>

Image maps, created with the AREA and MAP tags, make it possible for one picture to offer more sophisticated links.

  Articles


Missing Picture!

We looked all over; it just isn't anywhere to be found. It was a very cool picture, with gooey caramel and chocolate and jimmies—you'd have really liked it. You'd think that after all the work we put into this book, we would have sorted this out. I guess this isn't very professional looking, and maybe it looks like we don't care. We really do care—there are just so many details to keep track of and projects to finish. Oops, there's another detail. . . gotta run.


Demo - No, it's not hiding here. It's only a few dollars, so why not just buy it?


 Optimizing Pictures

This topic is included when you register.


 Picture Notes

No matter how exciting and essential your pictures are, some people will never see them. Perhaps their browser doesn't support the picture type, or maybe they have turned off pictures because their connection is slow, or (gasp) maybe they just don't like pictures.

Internet browsers support just a few bitmap picture formats. We can use plug-ins to add support for vector (line-drawing) pictures and other new object types.

Are you adding a picture as an illustration, or as spot color to brighten-up the document? You may be able to substitute a TABLE cell with a colorful background.

Before adding a picture, decide if it improves the look, navigation, or content of the document.

Pictures add interest, but larger pictures don't necessarily add more interest.

Stock clipart looks like what it is. You are better served by no graphics at all, than by stock animated GIF pictures.

Avoid using small transparent pictures as spacers. Replace these filler-pictures with &nbsp;.

Experiments have shown that most people read headlines before looking at pictures. For impact, use a H1 headline, and reinforce it with a picture.

Avoid unnecessary animated GIF pictures. Using an animated bullet on list items is a sure way to keep people from reading the list. Perhaps the best and least offensive use is for Web page advertisements—readers expect a lot of advertising information in a small place, and a carefully designed image draws attention without distraction.

Displaying animated GIF pictures slows the computer and saps memory. Some computers, especially those with less than 16MB of memory or those with several applications or drivers running, may become unstable when displaying multiple animated GIF pictures.

Use Web-safe colors in pictures. Not only will your pictures look good on more computers, but you will eliminate palette flash.

Colors look lighter on the Macintosh than on PC-compatibles. If you see a Web site that looks dark and drab, it was probably designed on a Macintosh, but not tested on a PC.

Use the Alt attribute with IMG tags. The description will aid those who can't view pictures, and maybe it will make picture-haters curious enough that they want to take a peek anyway.

Use UL instead of bullet pictures. See the Notes section in UL for how to create colorful bullets in Netscape and Internet Explorer.

  Articles


 Introducing Tables

Tables affect just about every aspect of HTML document design—they are used for far more than just presenting columns of data.

We usually think of tables as multiple-columns of data in word processor documents, spreadsheets, and the weather section in the newspaper. Let's look at a traditional table. Click on the illustration to see the HTML tags:

The TABLE tag marks the beginning of the table definition; it uses attributes that describe the table layout. We begin each table row with the TR tag. Each cell in the row is marked by additional tags. The first row in this table is the headers; we use TH because it automatically formats text in bold type. The remaining table cells are tagged with TD. Here are the tags used in the table above:

<TABLE Cols = 4 Border = 4 BGColor = "#CCFFFF">

<TR> <!-- First row: table header -->
<TH>Month</TH><TH>Max Temp</TH><TH>Record</TH>
</TR>

<TR> <!-- Second row: June -->
<TD>June</TD><TD>100.3</TD><TD>122</TD>
</TR>

<TR> <!-- Third row: July -->
<TD>July</TD><TD>105.9</TD><TD>121</TD>
</TR>

<TR> <!-- Fourth row: August -->
<TD>August</TD><TD>103.7</TD><TD>116</TD>
</TR>

<TR> <!-- Fifth row: September -->
<TD>September</TD><TD>98.3</TD><TD>116</TD>
</TR>

</TABLE>

That looks like a lot of work for just a few lines of data. After all, we could have simplified things by formatting the text in fixed-pitch type and displaying it with the PRE tag. But that would miss the power of tables: the browser automatically adjusts column widths and heights to fit the data in the cells, and the table width to fit the page. The table will look good on any display or printer, regardless of the size or resolution.

Once you've learned the TABLE Cols, Width, and BGColor attributes, plus how TD and TR work, you are ready to explore the power of tables.

  Articles

  Style Topics


 Table Layout

Many documents enclose most text and pictures within tables. Tables make it easy to exactly position elements, format text in multiple columns, and change background color.

The next illustration, using HTML 3.2 tags, demonstrates multiple-column tables used as document structure. We have used light gray borders between table cells to make it easier to see alignment.

While it looks like one large table, we have split the document into two tables. The first table is navigational aids, plus the company logo and the headline. This is boilerplate formatting that rarely changes. The second table is the body of the document; this section changes more frequently, so a consistent, simple design is important.

First Table

Define the shape of the first table. This table has two, unequal-width columns. Multiple-column documents usually have no borders; use the TABLE tag Border=0 attribute to turn off table borders. The CellPadding attribute gives a little extra space between the edge of cells and text.

<TABLE Cols = 2 Width = "100%" Border = 0 CellSpacing = 0 CellPadding = 1>

The first row spans two columns. This is the navigational bar, probably containing small pictures representing popular stops on your Web site. The BGColor is black, and pictures probably also have black backgrounds—be sure to add text links somewhere on the page for browsers that do not show pictures.

<TR><!-- Two-column navigational bar -->

<TD ColSpan = 2 BGColor = "#000000" Align = CENTER>

<FONT Face = "Helvetica, Arial" Size = 2 Color = "#FFFFFF">
Navigation Aids
</FONT>

</TD></TR>

The second row has two columns. The left column contains the company logo; the right column contains the company name.

<TR><!-- Second table row -->
<TD Width = "100"><!-- Left-hand cell with the logo -->
<IMG Src = "logo.gif" Width = 80 Height = 50 Alt = "Our Logo">
</TD>

The logo in the left column is taller than the text in the right column. Table data defaults to vertically centered, so the book name is left-aligned, but vertically centered.

<TD><!-- Right-hand cell with book name -->

<FONT Face = "Times" Color = "#008000" Size = 5>
Alice In Wonderland
</FONT>

</TD></TR></TABLE>

Second Table

Splitting the document into multiple tables gives the browser a chance to render a portion of the document without having to first read and interpret the whole thing. If a page seems to take forever to load but then quickly displays, or it is drawn more than once, table layout is probably too complex.

The body of the document is in the second table, which has three columns. The leftmost column, with a cyan background, contains links or perhaps news. The center column is the main document, and the rightmost column, with the gray background, is pictures or filler.

<!-- Start a new table to keep browser performance up -->
<TABLE Cols = 3 Width = "100%" Border = 0 CellSpacing = 0 CellPadding = 8>

In our document, the left column is narrow with a cyan background. The VAlign attribute ensures that text is aligned at the top of the cell; if we don't use this attribute and another cell in the same row is much longer, text in this column is vertically centered, which may place it too low on the page. In some designs, the left column is narrow, and left blank.

<TR>
<TD Width = "25%" BGColor = "#66FFFF" VAlign = TOP>

<!-- Table of contents data -->

</TD>

The second column is the main document.

<TD VAlign = TOP> <!-- This is the center column -->
<H1>Down the Rabbit-Hole</H1>

<P>Alice was beginning to get very tired. . .

</TD>

The rightmost column is narrow with a light gray background. Notice that we set TD Align = CENTER, but we didn't use VAlign; the picture is vertically and horizontally centered in the column.

<TD Align = CENTER BGColor = "#FF9999">

<IMG Src = "alice.gif" Width = 50 Height = 70 Alt = "Alice">

</TD></TR></TABLE>

  Articles

  Style Topics


Introducing Tables
 Table Review

Each table row begins with the TR tag and ends with /TR.

All cells in the current row are as tall as the tallest cell in the row.

For exact vertical alignment in multiple-column tables, start a new table row.

A simple, single-cell table is useful when we want to change the background color to emphasize a paragraph or two.

Empty table cells are often ignored by the browser, resulting in unexpected alignment. Add a blank paragraph, formatted with <P>&nbsp;</P>, to a blank table cell.

If your table is too narrow, remember that the browser makes the table only as wide as necessary to fit the data. Use the TABLE Width attribute to force the browser to draw a wider table.

While designing tables, use a non-zero TABLE Border setting, even if the completed table will not have borders. This makes it easier to see exact placement and alignment of design elements.

The TABLE tag can set the default background color for the table, but you can use the TD BGColor attribute to change the background color for individual table cells.

A few lines of blank pixels may separate adjoining tables. Use the TABLE CellSpacing attribute to minimize unnecessary blank space.

For performance, avoid creating large tables with complex designs. Instead of using the TABLE ColSpan and RowSpan attributes, use separate small tables.

Always include IMG Height and Width attributes for pictures within tables. The browser may display the document as it is received, but then be forced to display it again when pictures are loaded that don't fit within the current table dimensions.

Use tables as bar charts. Create a multiple-column table, and use ColSpan to set the width of the bars.

Table Compatibility

Avoid using absolute column dimensions. Expressing column widths as percentages makes it possible for the browser to automatically resize the document for the current screen resolution or browser window size. If column widths are absolute values and the browser uses larger or smaller fonts than you used to design the document, the document will show unexpected word-wrapping or text clipping.

Don't nest tables. Current browsers allow tables within tables, an interesting and useful effect, but older browsers may display the document incorrectly—or they may crash.

Netscape 2 supports tables, but not background colors in table cells. For backward compatibility, the FONT Color attribute should be readable on the document's background color. For example, if the document background is white, white text in a table cell that has a dark background may display as white-on-white.

Netscape returns to the default font within table cells, regardless of the font we assigned before starting the table. Use the FONT and /FONT tags within any table cell that requires special fonts.

Regardless of the width and height settings we make, most browsers will resize the table to fit the screen, based on the contents of table cells. And they won't always do it accurately—don't depend on exact table placement as the only visual clues of relationships between elements on the page.

Early releases of MSHTML allow text to follow a table on the same line. Always use the P tag at the beginning of text that follows a table.

Early browsers don't do tables. Use P tags at the beginning of table data to ensure that text doesn't run-together when displayed by old Web browsers.

  Articles

  Style Topics


<TR><!-- Two-column navigational bar -->
<TD ColSpan = 2 BGColor = "#000000" Align = CENTER>
<FONT Face = "Helvetica, Arial" Size = 2 Color = "#FFFFFF">Navigation Aids
</FONT></TD></TR>


<TR><TD Width = "100"><IMG Src = "logo.gif" Width = 80 Height = 50 Alt = "Our Logo"></TD>


<TD><FONT Face = "Times" Color = "#008000" Size = 5>
Alice In Wonderland</FONT></TD></TR></TABLE>


<!-- Table of contents data -->

<TABLE Cols = 3 Width = "100%" Border = 0 CellSpacing = 0 CellPadding = 8>

<TR><TD Width = "25%" BGColor = "#66FFFF" VAlign = TOP><TD VAlign = TOP>

<B>I</B> <A HRef = "ChapterI">Down the Rabbit-Hole</A> . . .


<!-- This is the center column -->

<A Name = "Chapter1">

<H1>Down the Rabbit-Hole</H1><P>Alice was beginning to get very tired . . .


<!-- This is the right column -->

<TD Align = CENTER BGColor = "#FF9999">
<IMG Src = "alice.gif" Width = 50 Height = 70 Alt = "Alice"></TD></TR></TABLE>


 Introducing Fonts

In 1996, the Web discovered fonts. Introduced in Internet Explorer 2 and Netscape Navigator 3, the FONT tag Face attribute adds the ability to specify the font by name without having to render every headline as a picture.

Today, we use fonts instead of pictures for dramatic color and design. Coupled with style sheets and colorful tables, we can create large fonts with contrasting background colors for block titles, or small fonts like Verdana for compact, yet readable, documents.

 Font sizes are numbered 1-7.

Every output device may use different standard fonts. Usually, Times Roman is the default body text.

The BASEFONT tag changes the default font. You can use BASEFONT several times within the document to use different fonts within separate sections.

The FONT tag changes the appearance of text within a section of a document. Always use a closing /FONT tag to restore the original font. /FONT returns to the font set by BASEFONT.

Styles and style sheets enhance fonts even more. You can define formatting that customizes standard HTML tags; when you use the tags in your documents, style formatting overrides standard document formatting.

See Font Samples for illustrations of widely-available fonts for the Web.

  Articles

  Style Topics


Font_Samples
 Font Samples

Arial, Helvetica, Swiss, Univers, there's not a point of difference among them. You could write everything for the rest of your life in this standard sans serif design without being called boring (just not very adventurous).

Example

<FONT Face = "Arial, Helvetica, Geneva, Franklin Gothic, Swiss 721 BT, Swiss">

Arial Black really gets the point across. This font is furnished with Lotus Smart Suite, Microsoft Office, and Internet Explorer; you may want to add Impact and Arial to the Face list, just to make sure the user sees a sans serif font.

Example

<FONT Face = "Arial Black, Swiss Heavy, Franklin Gothic Heavy, Gill Sans Ultra Bold, Futura Exblk">

When you absolutely need 18% more tiny text on the line, try Arial Narrow. This Monotype-designed font appears to be the same design as Arial, but reduced to about 82% of the regular width. While many other fonts we show here are hand-smoothed for best on-screen appearance, Arial Narrow looks best at larger sizes or when printed. Arial Narrow is furnished with Lotus Smart Suite and Microsoft Office; you may want to add Arial to the Face list, just to make sure the user sees a sans serif font.

Example

<FONT Face = "Arial Narrow, Gill Sans Condensed, Helvetica Narrow, Arial">

More sophisticated than cute, this new standard is friendly for adults, too. Just don't try to read more than about four lines of type set in Comic Sans MS.

Example

<FONT Face = "Comic Sans MS, Tekton, TektoMM, Caflish Script Web, Lucida Casual, Tempus Sans ITC, Giddyup, Brush Script">

With line weight way too thin for the job, Courier New is still the de facto standard for fixed-pitch fonts.

For a sans serif, monospace font, try Letter Gothic or Andale Mono.

Example

<FONT Face = "Courier New, Courier, Lucida Console, Andale Mono, Lucida Console, Letter Gothic, Terminal">

An elegant, beautiful font with a small x-height, Garamond is best used on high resolution printers. If you want to use Garamond on your Web pages, consider using Size = 4, or reserve the font for headlines.

Example

<FONT Face = "Garamond, Garamond Medium, AGaramond, Garamond MT, Garamond BT, American Garamond, Classical Garamond, Elegant Garamond, Galliard, Palatino">

MS Georgia renders well on the screen. Nothing exciting here, just open, readable characters and forms. Century Schoolbook, a similar design, really was designed for use in text books. Clearer and more readable than Times. Works well with Verdana.

Example

<FONT Face = "Georgia, Minion Web, Century Schoolbook, Schoolbook, New Century Schoolbook, Cheltenham, Lucida Fax, Charter BT">

Trendy and modern, the well-named Impact is best used in large sizes for headlines. Don't use it too frequently, or it will look like you're shouting.

Example

<FONT Face = "Impact, Haettenschweiler, Willow, Futura Exblk Cond, Franklin Gothic Demi Cond, Swiss Black Cond">

Most browsers default to a variation of Times. If you do nothing, you'll get this smooth, readable font. Times works well on the screen at larger sizes. Try Georgia instead for increased readability. If your Web site uses small fonts, use Arial or Verdana instead.

Example

<FONT Face = "Times New Roman, Times, Times Roman, Minion Web, Roman">

Bitstream Cyberbit

In March, 1997 Bitstream introduced Cyberbit, a Times-like face that contains literally thousands of characters in dozens of character sets. The goal is a standard font for the whole world. Hopefully a standard will emerge, but at 13MB per font and long delays whenever the rasterizer has to format a character, we may have to wait. You can download an evaluation font from Bitstream at http://www.bitstream.com/.

This recent sans serif design is destined to be a trendy display font for headlines. Trebuchet MS is based on sophisticated designs from the '30s. Use it in your corporate name, and everybody'll think you have a Starbuck's franchise in the lobby. Well-rendered for the screen, but too widely spaced for high-resolution printing.

Extra leading means that Trebuchet MS pages are displayed with additional space between lines of text.

If you're looking for clarity, be sure to include Tahoma in the font Face list.

Example

<FONT Face = "Trebuchet MS, Myriad Web, Century Gothic, Gill Sans, Verdana, Franklin Gothic Book, Tahoma, Arial, Helvetica">

Verdana is the new standard sans serif font designed for low resolution display. A wide, open design, with lots of space between characters, Verdana is incredibly legible—even at tiny sizes. One day soon, some expect to see every computer contain Verdana. That day will never come; you can substitute Arial or Helvetica with only slightly reduced readability.

Example

<FONT Face = "Verdana, Trebuchet MS, Tahoma, Arial, Helvetica">

Adobe WebType

Introduced in October 1997, this unique collection of twelve TrueType fonts is designed and marketed—for about $50 (US)—just for Internet design and embedded fonts. Based on high-quality Adobe proprietary designs, you can use these fonts in illustrations and with the FONT tag or style sheets.

The Minion Web font is included with Internet Explorer 4, but other fonts in Adobe WebType are rarely available on the client's computer. For this reason, the fonts are most useful with browsers that support embedded fonts—and unfortunately embedded fonts dramatically increase the size of our HTML documents—which sorely limits their usefulness. See http://www.adobe.com [image].

Symbol Faces

Also called Pi fonts or Dingbats, these fonts render bullets, icons and symbols as scalable fonts instead of fixed-resolution pictures, cutting download time and simplifying reusability.

Just now being discovered on the Web, it's interesting how similar these standard designs are. You can often select a character in a font, and expect it to look similar, or at least appropriate, in an entirely different font. See Icon Symbols for another method for entering pictographs as characters.

If your operating supports a Character Map program, load the font, and find appropriate codes to enter in your HTML document.

Example

<FONT Face = "Wingdings, Dingbats, Zapf Dingbats, ZapfDingbats, ITC Zapf Dingbats, Webdings, Monotype Sorts, Symbol, Zapf Dingbats BT, Zingbats, Dingbat 3">

Want to use a logo without copyright infringement or making the viewer drag the bitmap picture across the Internet? Try specifying character 255 in Wingdings. The worst that will happen is you will get an odd character, like "ÿ" when you really want " · " (We really want to show ÿ; if you see anything proprietary, it's a feature of newer Help viewers).

<FONT Face = "Wingdings, Dingbats, Zapf Dingbats, ZapfDingbats" Size = 5 Color = "#990099">&#255; </FONT>

Font Notes

We show only a few fonts, even though thousands are available on computers today. When selecting alternate fonts, don't look just for font names that are similar, look for fonts that match the spirit of the design. For instance, President is a script handwriting face furnished with some Corel products; you may want to substitute Comic Sans MS, then move to Impact; all of these fonts are dramatic, yet they are far from equivalent.

We show several font substitutions in examples, in order of decreasing similarity. In most cases, only two or three are enough; the browser will substitute standard fonts if it cannot find your choices. It's nicer to offer font suggestions, but it slows down everything if the browser has to look through a long list.

Fonts in examples are rendered without font smoothing. Font smoothing, a process that fills-in jagged bitmap pictures with gray pixels, makes most fonts easier to read, but only a small percentage of computers use font smoothing.

 If you have the fonts shown on this page installed on your computer, click the illustrations to see samples of the character sets.

  Articles

  Style Topics


 Special Characters

Sym	Code	Dec	Description

 	&nbsp;	160 	 Non-breaking space. Not supported by early browsers

"	&quot;	34	 Quotation mark. Optional; browsers accept quotation marks entered directly

&	&amp;	38	 Ampersand

<	&lt;	60	 Less than

>	&gt;	62	 Greater than

^	&#94;	94	 Caret; Accent Circumflex

`	&#96;	96	 Accent grave

…	&hellip;	133	 Ellipsis

†	&dagger;	134	 Dagger

‡	&Dagger;	135	 Double dagger

™	&trade;	153	 Trademark. Not supported by Netscape. Use "<SUP>(TM)</SUP>"

¡	&iexcl;	161	 Inverted exclamation

¢	&cent;	162	 Cent sign

£	&pound;	163	 Pound Sterling

¤	&curren;	164	 General currency

¥	&yen;	165	 Yen

&euro;	8364	 euro currency symbol

¦	&brvbar;	166	 Broken vertical bar

§	&sect;	167	 Section

¨	&die;	168	 Dieresis Umlaut (or &um;)

©	&copy;	169	 Copyright

ª	&ordf;	170	 Feminine ordinal

«	&laquo;	171	 Left chevron; left guillemot

¬	&not;	172	 Not sign

­	&shy;	173	 Soft hyphen

®	&reg;	174	 Registered. Best avoided because of sparse support by browsers

¯	&macr;	175	 Macron (over-score, vinculum)

°	&deg;	176	 Degree

±	&plusmn;	177	 Plus/minus

¸	&cedil;	184	 Cedilla

»	&raquo;	187	 Right chevron; right guillemot

¶	&para;	182	 Paragraph

º	&ordm;	186	 Masculine ordinal

¿	&iquest;	191	 Inverted question mark

×	&times;	215	 Multiplication sign

÷	&divide;	247	 Division sign

Characters

Á	&Aacute;	193	 Capital A, acute accent

á	&aacute;	225	 Small a, acute accent

Â	&Acirc;	194	 Capital A, circumflex

â	&acirc;	226	 Small a, circumflex

À	&Agrave;	192	 Capital A, grave accent

à	&agrave;	224	 Small a, grave accent

Å	&Aring;	197	 Capital A, ring

å	&aring;	229	 Small a, ring

Ã	&Atilde;	195	 Capital A, tilde

ã	&atilde;	227	 Small a, tilde

Ä	&Auml;	196	 Capital A, dieresis/umlaut

ä	&auml;	228	 Small a, dieresis/umlaut

Æ	&AElig;	198	 Capital AE ligature

æ	&aelig;	230	 Small ae ligature

Ç	&Ccedil;	199	 Capital C, cedilla

ç	&ccedil;	231	 Small c, cedilla

Ð	&ETH;	208	 Capital Eth, Icelandic

ð	&eth;	240	 Small eth, Icelandic

É	&Eacute;	201	 Capital E, acute accent

é	&eacute;	233	 Small e, acute accent

Ê	&Ecirc;	202	 Capital E, circumflex

ê	&ecirc;	234	 Small e, circumflex

È	&Egrave;	200	 Capital E, grave accent

è	&egrave;	232	 Small e, grave accent

Ë	&Euml;	203	 Capital E, dieresis/umlaut

ë	&euml;	235	 Small e, dieresis/umlaut

Í	&Iacute;	205	 Capital I, acute accent

í	&iacute;	237	 Small I, acute accent

Î	&Icirc;	206	 Capital I, circumflex

î	&icirc;	238	 Small I, circumflex

Ì	&Igrave;	204	 Capital I, grave accent

ì	&igrave;	236	 Small I, grave accent

Ï	&Iuml;	207	 Capital I, dieresis/umlaut

ï	&iuml;	239	 Small I, dieresis/umlaut

Ñ	&Ntilde;	209	 Capital N, tilde

ñ	&ntilde;	241	 Small n, tilde

Ó	&Oacute;	211	 Capital O, acute accent

ó	&oacute;	243	 Small o, acute accent

Ô	&Ocirc;	212	 Capital O, circumflex

ô	&ocirc;	244	 Small o, circumflex

Ò	&Ograve;	210	 Capital O, grave accent

ò	&ograve;	242	 Small o, grave accent

Ø	&Oslash;	216	 Capital O, slash

ø	&oslash;	248	 Small o, slash

Õ	&Otilde;	213	 Capital O, tilde

õ	&otilde;	245	 Small o, tilde

Ö	&Ouml;	214	 Capital O, dieresis /umlaut

ö	&ouml;	246	 Small o, dieresis/umlaut

ß	&szlig;	223	 Small sharp s, German sz

Þ	&THORN;	222	 Capital Thorn, Icelandic

þ	&thorn;	254	 Small thorn, Icelandic

Ú	&Uacute;	218	 Capital U, acute accent

ú	&uacute;	250	 Small u, acute accent

Û	&Ucirc;	219	 Capital U, circumflex

û	&ucirc;	251	 Small u, circumflex

Ù	&Ugrave;	217	 Capital U, grave accent

ù	&ugrave;	249	 Small u, grave accent

Ü	&Uuml;	220	 Capital U, dieresis/umlaut

ü	&uuml;	252	 Small u, dieresis/umlaut

Ý	&Yacute;	221	 Capital Y, acute accent

ý	&yacute;	253	 Small y, acute accent

Ÿ	&#159;	159	 Capital Y, dieresis/umlaut

ÿ	&yuml;	255	 Small y, dieresis/umlaut

Extended Characters

Latin Extended-A

Œ	&Oelig;	338	Latin capital ligature OE

œ	&oelig;	339	Latin small ligature OE

Š	&Scaron;	352	 Latin capital S with caron (hacek)

š	&scaron;	353	 Latin small S with caron (hacek)

Ÿ	&Yuml;	376	Latin capital y with dieresis

Spacing Modifier Letters

 	&circ;	710	Modifier circumflex accent

 	&tilde;	732	Small tilde

 	&ensp;	8194	en space

 	&emsp;	8195	em space

 	&thinsp;	8201	Thin space

 	&zwnj;	8204	Zero-width non-joiner

 	&zwj;	8205	Zero-width joiner

 	&lrm;	8206	Left-to-right mark

 	&rlm;	8207	Right-to-left mark

–	&ndash;	8211	 En dash

—	&mdash;	8212	 Em dash

‘	&lsquo;	8216	 Left single quotation mark

’	&rsquo;	8217	 Right single quotation mark

 	&sbquo;	8218	Single low-9 quotation mark

“	&ldquo;	8220	 Left double quotation mark

”	&rdquo;	8221	 Right double quotation mark

†	&dagger;	8224	 Dagger

‡	&Dagger;	8225	 Double dagger

‰	&permil;	8240	 Permille sign

 	&lsaquo;	8249	Single left-pointing angle quotation mark

 	&rsaquo;	8250	Single right-pointing angle quotation mark

Latin Extended-B

 	&fnof;	402	Latin small hooked F; florin

Greek

Α	&Alpha;	913	Greek capital alpha

Β	&Beta;	914	Greek capital beta

Γ	&Gamma;	915	Greek capital gamma

Δ 	&Delta;	916	Greek capital delta

Ε	&Epsilon;	917	Greek capital epsilon

Ζ	&Zeta;	918	Greek capital zeta

Η	&Eta;	919	Greek capital eta

ϑ	&Theta;	920	Greek capital theta

Ι	&Iota;	921	Greek capital iota

Κ	&Kappa;	922	Greek capital kappa

Λ	&Lambda;	923	Greek capital lambda

Μ	&Mu;	924	Greek capital mu

Ν	&Nu;	925	Greek capital nu

Ξ	&Xi;	926	Greek capital xi

Ο	&Omicron;	927	Greek capital Omicron

Π	&Pi;	928	Greek capital pi

Ρ	&Rho;	929	Greek capital rho

Σ	&Sigma;	931	Greek capital sigma

Τ	&Tau;	932	Greek capital tau

Υ	&Upsilon;	933	Greek capital upsilon

Φ	&Phi;	934	Greek capital phi

Χ	&Chi;	935	Greek capital chi

Ψ	&Psi;	936	Greek capital psi

Ω	&Omega;	937	Greek capital omega

α	&alpha;	945	Greek small alpha

β	&beta;	946	Greek small beta

γ	&gamma;	947	Greek small gamma

δ	&delta;	948	Greek small delta

ε	&epsilon;	949	Greek small epsilon

ζ	&zeta;	950	Greek small zeta

η	&eta;	951	Greek small eta

ϕ	&theta;	952	Greek small theta

ι	&iota;	953	Greek small iota

κ	&kappa;	954	Greek small kappa

λ	&lambda;	955	Greek small lambda

μ	&mu;	956	Greek small mu

ν	&nu;	957	Greek small nu

ξ	&xi;	958	Greek small xi

ο	&omicron;	959	Greek small omicron

π	&pi;	960	Greek small pi

ρ	&rho;	961	Greek small rho

 	&sigmaf;	962	Greek small final sigma

σ	&sigma;	963	Greek small sigma

τ	&tau;	964	Greek small tau

υ	&upsilon;	965	Greek small upsilon

φ	&phi;	966	Greek small phi

χ	&chi;	967	Greek small chi

ψ	&psi;	968	Greek small psi

ω	&omega;	969	Greek small omega

 	&thetasym;	977	Greek small theta symbol

 	&upsih;	978	Greek upsilon with hook symbol

 	&piv;	982	Greek pi symbol

General Punctuation

•	&bull;	8226	 Bullet

…	&hellip;	8230	 Horizontal ellipsis

 	&prime;	8242	Prime, Minutes, feet

 	&Prime;	8243	Double prime, Seconds, inches

¯	&oline;	8254	over-line, spacing over-score

 	&frasl;	8260	Fraction slash

&euro;	8364	20AC	 euro sign

Letter-like Symbols

 	&weierp;	8472	Script capital P. Power set; Weierstrass p

 	&image;	8465	Black-letter capital I. Imaginary part symbol

 	&Real;	8476	Black-letter capital R. Real part symbol

™	&trade;	8482	 Trademark

 	&alefsym;	8501	Alef symbol. First trans-finite cardinal

Arrows

←	&larr;	8592	Left arrow

↑	&uarr;	8593	Up arrow

→	&rarr;	8594	Right arrow

↓	&darr;	8595	Down arrow

↔	&harr;	8596	Left/right arrow

↵	&crarr;	8629	Down and left arrow. Carriage return

 	&lArr;	8656	Left double arrow

 	&uArr;	8657	Up double arrow

 	&rArr;	8658	Right double arrow

 	&dArr;	8659	Down double arrow

 	&hArr;	8660	Left/right double arrow

Mathematical Operators

 	&forall;	8704	For-all

 	&part;	8706	Partial differential

 	&exist;	8707	There exists

 	&empty;	8709	Empty set. Null set. Diameter

 	&nabla;	8711	Nabla. Backward difference

 	&isin;	8712	Element of

 	&notin;	8713	Not an element of

 	&ni;	8715	Contains as a member

 	&prod;	8719	n-ary product. Product sign

 	&sum;	8722	n-ary summation

–	&minus;	8722	***Minus sign

 	&lowast;	8727	Asterisk operator

 	&radic;	8730	Square root. Radical sign

 	&prop;	8733	Proportional to

 	&infin;	8734	Infinity

 	&ang;	8736	Angle

 	&and;	8869	***Logical AND. Wedge

 	&or;	8870	Logical OR. Vee

 	&cap;	8745	Intersection, cap

 	&cup;	8746	Union, cup

 	&int;	8747	Integral

 	&there4;	8756	Therefore

 	&sim;	8764	Tilde operator. Varies with. Similar to

 	&cong;	8773	Approximately equal to. Almost equal to. Asymptotic to (&asymp;)

 	&ne;	8800	Not equal to

 	&equiv;	8801	Identical to

 	&le;	8804	Less than or equal to

 	&ge;	8805	Greater than or equal to

 	&sub;	8834	Subset of

 	&sup;	8835	Superset of

 	&nsub;	8836	Not a subset of

 	&sube;	8838	Subset of or equal to

 	&supe;	8839	Superset of or equal to

 	&oplus;	8853	Circled plus. Direct sum

 	&otimes;	8855	Circled times. Vector product

 	&perp;	8869	***Up tack. Orthogonal to. Perpendicular

 	&sdot;	8901	Dot operator

Miscellaneous Technical Symbols

 	&lceil;	8968	Left ceiling. APL up-stile

 	&rceil;	8969	Right ceiling

 	&lfloor;	8970	Left floor. APL down-stile

 	&rfloor;	8971	Right floor

 	&lang;	9001	Left angle bracket

 	&rang;	9002	Right angle bracket

Geometric Shapes

&loz;	9674	Lozenge

 Miscellaneous Symbols

♠	&spades;	9824	Black spade suit

♣	&clubs;	9827	Black club suit. Shamrock

♥	&hearts;	9829	Black heart suit. Valentine

♦	&diams;	9830	Black diamond suit

Compatibility

Character codes marked in color are rarely supported. Many of these characters are defined in the Unicode character set.

Early browsers do not interpret non-breaking spaces (&nbsp;).

Netscape does not support &trade;. Use <SUP>(TM)</SUP> to simulate a trademark character.

Most browsers do not recognize the &euro; currency symbol, but later browsers do recognize &#8364;, which is the code we copy to the Clipboard when you click on [image]. In standard fonts furnished with Windows 98 and later operating systems, the euro symbol is mapped to character 128.

Netscape 3.x interprets < and > characters that are entered using &lt; and &gt; as HTML codes if the user re-sizes the window after loading the document. A work-around is to avoid using &lt; and &gt;, and only use these symbols in pre-formatted paragraph using PRE.

Notes

See also the Special characters item in the Edit menu.

See also Icon Symbols, a portable way to represent common icons as characters.

Most browsers display the codes for special characters they do not recognize. For example, a browser may not recognize the euro symbol, so it will display the &euro; without change. This is to our advantage, because users will see some indication of the special character or symbol, even if they do not see the symbol itself.

Use &amp; to enter ampersand characters in documents. Browsers generally display unrecognized special character codes, but for compatibility, always use &amp;.

Be careful when importing text that uses high-order characters, such as ANSI quotation marks and em-dashes. These characters will not always be displayed correctly. Use your word processor to search and replace the special typographic characters with standard character codes with values 32-126.

Sometimes we need extra blank space between sections in a document or to create empty table cells. Browsers ignore empty paragraphs created with the P tag. You can use &nbsp; to create empty paragraphs.

<P>&nbsp;</P>

Column	Description

Sym	Symbol. The displayable character associated with the character code.

Code	The HTML codes used to enter the characters.

Dec	Decimal value for the character.

Description	Descriptive name commonly associated with the character.

  Articles


Decimal, Hex, Binary ANSI table
 Character Conversion

Sym	Code	Dec	Hex	Description

 	 	0	00	Null

 	 	1	01	SOH

 	 	2	02	STX

 	 	3	03	ETX

 	 	4	04	EOT

 	 	5	05	ENQ

 	 	6	06	ACK

 	 	7	07	Bell

 	 	8	08	Backspace

 	 	9	09	Horizontal tab

 	 	10	0A	Line feed

 	 	11	0B	Vertical tab

 	 	12	0C	Form feed

 	 	13	0D	Carriage return

 	 	14	0E	SO

 	 	15	0F	SI

 	 	16	10	DLE

 	 	17	11	DC1

 	 	18	12	DC2

 	 	19	13	DC3

 	 	20	14	DC4

 	 	21	15	NAK

 	 	22	16	SYN

 	 	23	17	ETB

 	 	24	18	CAN

 	 	25	19	EM

 	 	26	1A	End of file

 	 	27	1B	Escape

 	 	28	1C	FS

 	 	29	1D	GS

 	 	30	1E	RS

 	 	31	1F	US

 	 	32	20	Space

!	 	33	21	Exclamation point (mark)

"	&quot;	34	22	 Quotation mark

#	 	35	23	Number sign

$	 	36	24	Dollar sign

%	 	37	25	Percent

&	&amp;	38	26	 Ampersand

'	 	39	27	Apostrophe

(	 	40	28	Left parenthesis

)	 	41	29	Right parenthesis

*	 	42	2A	Asterisk

+	 	43	2B	Plus sign

, 	 	44	2C	Comma

-	 	45	2D	Minus sign

.	 	46	2E	Period

/ 	 	47	2F	Forward slash (virgule)

0	 	48	30	Digit Zero

1	 	49	31	Digit One

2	 	50	32	Digit Two

3	 	51	33	Digit Three

4	 	52	34	Digit Four

5	 	53	35	Digit Five

6	 	54	36	Digit Six

7	 	55	37	Digit Seven

8	 	56	38	Digit Eight

9	 	57	39	Digit Nine

:	 	58	3A	Colon

;	 	59	3B	Semicolon

<	&lt;	60	3C	 Less than (left angle bracket)

=	 	61	3D	Equal sign

>	&gt;	62	3E	 Greater than (right angle bracket)

?	 	63	3F	Question mark

@	 	64	40	At sign (commercial at)

A	 	65	41	Latin capital letter A

B	 	66	42	Latin capital letter B

C	 	67	43	Latin capital letter C

D	 	68	44	Latin capital letter D

E	 	69	45	Latin capital letter E

F	 	70	46	Latin capital letter F

G	 	71	47	Latin capital letter G

H	 	72	48	Latin capital letter H

I	 	73	49	Latin capital letter I

J	 	74	4A	Latin capital letter J

K	 	75	4B	Latin capital letter K

L	 	76	4C	Latin capital letter L

M	 	77	4D	Latin capital letter M

N	 	78	4E	Latin capital letter N

O	 	79	4F	Latin capital letter O

P	 	80	50	Latin capital letter P

Q	 	81	51	Latin capital letter Q

R	 	82	52	Latin capital letter R

S	 	83	53	Latin capital letter S

T	 	84	54	Latin capital letter T

U	 	85	55	Latin capital letter U

V	 	86	56	Latin capital letter V

W	 	87	57	Latin capital letter W

X	 	88	58	Latin capital letter X

Y	 	89	59	Latin capital letter Y

Z	 	90	5A	Latin capital letter Z

[	 	91	5B	Left square bracket

\	 	92	5C	Backslash (reverse solidus)

]	 	93	5D	Right square bracket

^	 	94	5E	 Accent circumflex (caret)

_	 	95	5F	Underscore (horizontal bar)

`	 	96	60	 Grave (acute accent)

a	 	97	61	Latin small letter A

b	 	98	62	Latin small letter B

c	 	99	63	Latin small letter C

d	 	100	64	Latin small letter D

e	 	101	65	Latin small letter E

f	 	102	66	Latin small letter F

g	 	103	67	Latin small letter G

h	 	104	68	Latin small letter H

I	 	105	69	Latin small letter I

j	 	106	6A	Latin small letter J

k	 	107	6B	Latin small letter K

l	 	108	6C	Latin small letter L

m	 	109	6D	Latin small letter M

n	 	110	6E	Latin small letter N

o	 	111	6F	Latin small letter O

p	 	112	70	Latin small letter P

q	 	113	71	Latin small letter Q

r	 	114	72	Latin small letter R

s	 	115	73	Latin small letter S

t	 	116	74	Latin small letter T

u	 	117	75	Latin small letter U

v	 	118	76	Latin small letter V

w	 	119	77	Latin small letter W

x	 	120	78	Latin small letter X

y	 	121	79	Latin small letter Y

z	 	122	7A	Latin small letter Z

{ 	 	123	7B	Left curly brace

|	 	124	7C	Vertical bar (OR symbol)

} 	 	125	7D	Right curly brace

~	 	126	7E	Tilde

 	 	127	7F	Delete

€	&euro;	128	80	  euro currency symbol

�	 	129	81	Not used

‚	 	130	82	 Baseline single quote

ƒ	&fnof;	131	83	 Latin small hooked F; florin

„	 	132	84	 Baseline double quote

…	&hellip;	133	85	 Ellipsis

†	&dagger;	134	86	 Single dagger

‡	&Dagger;	135	87	 Double dagger

ˆ	 	136	88	 Accent circumflex (caret). euro currency symbol in Codepage 1251.

‰	&permil;	137	89	 Permille

Š	&Scaron;	138	8A	 Latin capital S with caron (hacek)

‹	&lsaquo;	139	8B	 Single left angle quote; single Guillemet (quillement)

Œ	&OElig;	140	8C	 Latin capital OE ligature

�	 	141	8D	Not used

Ž	 	142	8E	Not used

�	 	143	8F	Not used

�	 	144	90	Not used

‘	&lsquo;	145	91	 Opening single quote

’	&rsquo;	146	92	 Closing single quote

“	&ldquo;	147	93	 Opening double quote

”	&rdquo;	148	94	 Closing double quote

•	&bull;	149	95	 Bullet

–	&ndash;	150	96	 En-dash

—	&mdash;	151	97	 Em-dash

˜	&oline;	152	98	 Over-score (over-line)

™	&trade;	153	99	 Trademark

š	&scaron;	154	9A	 Latin small S with caron (hacek)

›	&rsaquo;	155	9B	 Single right angle quote; single Guillemet (quillement)

œ	&oelig;	156	9C	 Latin small OE ligature

�	 	157	9D	Not used

ž	 	158	9E	Not used

Ÿ	&Yuml;	159	9F	 Latin capital Y, diæresis/umlaut

 	&nbsp;	160	A0	 Non-breaking space

¡	&iexcl;	161	A1	 Inverted exclamation mark

¢	&cent;	162	A2	 Cent symbol

£	&pound;	163	A3	 Pound Sterling

¤	&curren;	164	A4	 International Currency (currency sign)

¥	&yen;	165	A5	 Japanese Yen (yen sign)

¦	&brvbar;	166	A6	 Split | (broken vertical bar)

§	&sect;	167	A7	 Section sign

¨	&die;	168	A8	 Umlaut (dieresis)

©	&copy;	169	A9	 Copyright

ª	&ordf;	170	AA	 Feminine ordinal indicator

«	&laquo;	171	AB	 Left Guillemet (chevron, left angle quote)

¬	&not;	172	AC	 Not sign

­	&shy;	173	AD	 Soft hyphen

®	&reg;	174	AE	 Registered trademark

¯	&macr;	175	AF	 Macron (over-score, vinculum)

°	&deg;	176	B0	 Degree sign

±	&plusmn;	177	B1	 Plus-Minus sign

²	&sup2;	178	B2	 Two Superscript

³	&sup3;	179	B3	 Three Superscript

´	&acute;	180	B4	 Acute accent

µ	&micro;	181	B5	 Micro sign

¶	&para;	182	B6	 Paragraph

·	&middot;	183	B7	 Middle dot

¸	&cedil;	184	B8	 Cedilla

¹	&sup1;	185	B9	 Superscript one

º	&ordm;	186	BA	 Masculine ordinal

»	&raquo;	187	BB	 Right Guillemet (chevron, right angle quote)

¼	&frac14;	188	BC	 One-fourth

½	&frac12;	189	BD	 One-half

¾	&frac34;	190	BE	 Three-fourths

¿	&iquest;	191	BF	 Inverted question mark

À	&Agrave;	192	C0	 Latin capital A, grave accent

Á	&Aacute;	193	C1	 Latin capital A, acute

Â	&Acirc;	194	C2	 Latin capital A, circumflex

Ã	&Atilde;	195	C3	 Latin capital A, tilde

Ä	&Auml;	196	C4	 Latin capital A, dieresis/umlaut

Å	&Aring;	197	C5	 Latin capital A, ring

Æ	&AElig;	198	C6	 Latin capital AE ligature

Ç	&Ccedil;	199	C7	 Latin capital C, cedilla

È	&Egrave;	200	C8	 Latin capital E, grave accent

É	&Eacute;	201	C9	 Latin capital E, acute accent

Ê	&Ecirc;	202	CA	 Latin capital E, circumflex

Ë	&Euml;	203	CB	 Latin capital E, dieresis/umlaut

Ì	&Igrave;	204	CC	 Latin capital I, grave accent

Í	&Iacute;	205	CD	 Latin capital I, acute accent

Î	&Icirc;	206	CE	 Latin capital I, circumflex

Ï	&Iuml;	207	CF	 Latin capital I, dieresis/umlaut

Ð	&ETH;	208	D0	 Latin capital Eth, Icelandic

Ñ	&Ntilde;	209	D1	 Latin capital N, tilde

Ò	&Ograve;	210	D2	 Latin capital O, grave accent

Ó	&Oacute;	211	D3	 Latin capital O, acute accent

Ô	&Ocirc;	212	D4	 Latin capital O, circumflex

Õ	&Otilde;	213	D5	 Latin capital O, tilde

Ö	&Ouml;	214	D6	 Latin capital O, dieresis/umlaut

×	&times;	215	D7	 Multiplication sign

Ø	&Oslash;	216	D8	 Latin capital O, slash

Ù	&Ugrave;	217	D9	 Latin capital U, grave accent

Ú	&Uacute;	218	DA	 Latin capital U, acute accent

Û	&Ucirc;	219	DB	 Latin capital U, circumflex

Ü	&Uuml;	220	DC	 Latin capital U, dieresis/umlaut

Ý	&Yacute;	221	DD	 Y, acute accent

Þ	&THORN;	222	DE	 Latin capital thorn, Icelandic

ß	&szlig;	223	DF	 Latin small sharp s, German sz

à	&agrave;	224	E0	 Latin small A, grave accent

á	&aacute;	225	E1	 Latin small A, acute accent

â	&acirc;	226	E2	 Latin small A, circumflex

ã	&atilde;	227	E3	 Latin small A, tilde

ä	&auml;	228	E4	 Latin small A, dieresis/umlaut

å	&aring;	229	E5	 Latin small A, ring

æ	&aelig;	230	E6	 Small AE ligature

ç	&ccedil;	231	E7	 Small C, cedilla

è	&egrave;	232	E8	 Latin small E, grave accent

é	&eacute;	233	E9	 Latin small E, acute accent

ê	&ecirc;	234	EA	 Latin small E, circumflex

ë	&euml;	235	EB	 Latin small E, dieresis/umlaut

ì	&igrave;	236	EC	 Latin small I, grave accent

í	&iacute;	237	ED	 Latin small I, acute accent

î	&icirc;	238	EE	 Latin small I, circumflex

ï	&iuml;	239	EF	 Latin small I, dieresis/umlaut

ð	&eth;	240	F0	 Latin small eth, Icelandic

ñ	&ntilde;	241	F1	 Latin small N, tilde

ò	&ograve;	242	F2	 Latin small O, grave accent

ó	&oacute;	243	F3	 Latin small O, acute accent

ô	&ocirc;	244	F4	 Latin small O, circumflex

õ	&otilde;	245	F5	 Latin small O, tilde

ö	&ouml;	246	F6	 Latin small O, dieresis/umlaut

÷	&divide;	247	F7	 Division sign

ø	&oslash;	248	F8	 Latin small O, slash

ù	&ugrave;	249	F9	 Latin small U, grave accent

ú	&uacute;	250	FA	 Latin small U, acute accent

û	&ucirc;	251	FB	 Latin small U, circumflex

ü	&uuml;	252	FC	 Latin small U, dieresis/umlaut

ý	&yacute;	253	FD	 Latin small Y, acute accent

þ	&thorn;	254	FE	 Latin small thorn, Icelandic

ÿ	&yuml;	255	FF	 Latin small Y, dieresis/umlaut

Unicode Characters

 	&OElig;	338	152	Latin capital ligature oe

 	&oelig;	339	153	Latin small ligature oe

Š 	&Scaron;	352	160	 Latin capital s with caron (hacek)

š	&scaron;	353	161	 Latin small s with caron (hacek)

 	&scaron;	376	178	Latin capital y with dieresis

ƒ	&fnof;	402	192	Latin small hooked F; florin

 	&circ;	710	2C6	Modifier circumflex accent

 	&tilde;	732	2DC	Small tilde

Α	&Alpha;	913	391	Greek capital alpha

Β	&Beta;	914	392	Greek capital beta

Γ	&Gamma;	915	393	Greek capital gamma

Δ 	&Delta;	916	394	Greek capital delta

Ε	&Epsilon;	917	395	Greek capital epsilon

Ζ	&Zeta;	918	396	Greek capital zeta

Η	&Eta;	919	397	Greek capital eta

ϑ	&Theta;	920	398	Greek capital theta

Ι	&Iota;	921	399	Greek capital iota

Κ	&Kappa;	922	39A	Greek capital kappa

Λ	&Lambda;	923	39B	Greek capital lambda

Μ	&Mu;	924	39C	Greek capital mu

Ν	&Nu;	925	39D	Greek capital nu

Ξ	&Xi;	926	39E	Greek capital xi

Ο	&Omicron;	927	39F	Greek capital Omicron

Π	&Pi;	928	3A0	Greek capital pi

Ρ	&Rho;	929	3A1	Greek capital rho

Σ	&Sigma;	931	3A3	Greek capital sigma

Τ	&Tau;	932	3A4	Greek capital tau

Υ	&Upsilon;	933	3A5	Greek capital upsilon

Φ	&Phi;	934	3A6	Greek capital phi

Χ	&Chi;	935	3A7	Greek capital chi

Ψ	&Psi;	936	3A8	Greek capital psi.

Ω	&Omega;	937	3A9	Greek capital omega

α	&alpha;	945	3B1	Greek small alpha

β	&beta;	946	3B2	Greek small beta

γ	&gamma;	947	3B3	Greek small gamma

δ	&delta;	948	3B4	Greek small delta

ε	&epsilon;	949	3B5	Greek small epsilon

ζ	&zeta;	950	3B6	Greek small zeta

η	&eta;	951	3B7	Greek small eta

ϕ	&theta;	952	3B8	Greek small theta

ι	&iota;	953	3B9	Greek small iota

κ	&kappa;	954	3BA	Greek small kappa

λ	&lambda;	955	3BB	Greek small lambda

μ	&mu;	956	3BC	Greek small mu

ν	&nu;	957	3BD	Greek small nu

ξ	&xi;	958	3BE	Greek small xi

ο	&omicron;	959	3BF	Greek small omicron

π	&pi;	960	3C0	Greek small pi

ρ	&rho;	961	3C1	Greek small rho

&sigmaf;	962	3C2	Greek small final sigma

σ	&sigma;	963	3C3	Greek small sigma

τ	&tau;	964	3C4	Greek small tau

υ	&upsilon;	965	3C5	Greek small upsilon

φ	&phi;	966	3C6	Greek small phi

χ	&chi;	967	3C7	Greek small chi

ψ	&psi;	968	3C8	Greek small psi

ω	&omega;	969	3C9	Greek small omega

 	&thetasym;	977	3CA	Greek small theta symbol

 	&upsih;	978	3CB	Greek upsilon with hook symbol

 	&piv;	982	3CC	Greek pi symbol

 	&ensp;	8194	2002	en space

 	&emsp;	8195	2003	em space

 	&thinsp;	8201	2009	Thin space

 	&zwnj;	8204	200C	Zero-width non-joiner

 	&zwj;	8205	200D	Zero-width joiner

 	&lrm;	8206	200E	Left-to-right mark

 	&rlm;	8207	200F	Right-to-left mark

–	&ndash;	8211	2013	 En dash

—	&mdash;	8212	2014	 Em dash

‘	&lsquo;	8216	2018	 Left single quotation mark

’	&rsquo;	8217	2019	 Right single quotation mark

 	&sbquo;	8218	201A	Single low-9 quotation mark

“	&ldquo;	8220	201C	 Left double quotation mark

”	&rdquo;	8221	201D	 Right double quotation mark

 	&bdquo;	8222	201E	Double low-nine quotation mark

†	&dagger;	8224	2020	 Dagger

‡	&Dagger;	8225	2021	 Double dagger

•	&bull;	8226	2022	 Bullet

…	&hellip;	8230	2026	 Horizontal ellipsis

‰	&permil;	8240	2030	 Permille sign

 	&prime;	8242	2032	Prime, Minutes, feet

 	&Prime;	8243	2033	Double prime, Seconds, inches

‹	&lsaquo;	8249	2039	Single left-pointing angle quotation mark

›	&rsaquo;	8250	203A	Single right-pointing angle quotation mark

¯	&oline;	8254	203E	over-line, spacing over-score

 	&frasl;	8260	2044	Fraction slash

&euro;	8364	20AC	 euro sign

 	&image;	8465	2111	Black-letter capital I. Imaginary part symbol

 	&weierp;	8472	2118	Script capital P. Power set; Weierstrass p

 	&Real;	8476	211C	Black-letter capital R. Real part symbol

™	&trade;	8482	2122	 Trademark

 	&alefsym;	8501	2135	Alef symbol. First trans-finite cardinal

←	&larr;	8592	2190	Left arrow

↑	&uarr;	8593	2191	Up arrow

→	&rarr;	8594	2192	Right arrow

↓	&darr;	8595	2193	Down arrow

↔	&harr;	8596	2194	Left/right arrow

↵	&crarr;	8629	21B5	Down and left arrow. Carriage return

 	&lArr;	8656	21D0	Left double arrow

 	&uArr;	8657	21D1	Up double arrow

 	&rArr;	8658	21D2	Right double arrow

 	&dArr;	8659	21D3	Down double arrow

 	&hArr;	8660	21D4	Left/right double arrow

 	&forall;	8704	2200	For-all

&part;	8706	2202	Partial differential

 	&exist;	8707	2203	There exists

 	&empty;	8709	2205	Empty set. Null set. Diameter

 	&nabla;	8711	2207	Nabla. Backward difference

 	&isin;	8712	2208	Element of

 	&notin;	8713	2209	Not an element of

 	&ni;	8715	220B	Contains as a member

&prod;	8719	220D	n-ary product. Product sign

&sum;	8722	2212	n-ary summation

–	&minus;	8722	2212	***Minus sign

 	&lowast;	8727	2217	Asterisk operator

&radic;	8730	221A	Square root. Radical sign

 	&prop;	8733	221D	Proportional to

&infin;	8734	221E	Infinity

 	&ang;	8736	2220	 Angle

&cap;	8745	2229	Intersection, cap

 	&cup;	8746	222A	Union, cup

 	&int;	8747	222B	Integral

 	&there4;	8756	2234	Therefore

 	&sim;	8764	223C	 Tilde operator. Varies with. Similar to

 	&cong;	8773	2245	Approximately equal to

&asymp;	8776	2248	Asymptotic; almost equal

&ne;	8800	2260	Not equal to

&equiv;	8801	2261	Identical to

&le;	8804	2265	Less than or equal to

&ge;	8805	2266	Greater than or equal to

 	&sub;	8834	2282	Subset of

 	&sup;	8835	2283	Superset of

 	&nsub;	8836	2284	 Not a subset of

 	&sube;	8838	2286	Subset of or equal to

 	&supe;	8839	2287	Superset of or equal to

 	&oplus;	8853	2295	Circled plus. Direct sum

 	&otimes;	8855	2297	Circled times. Vector product

 	&perp;	8869	22A5	***Up tack. Orthogonal to. Perpendicular

 	&and;	8869	22A5	***Logical and. Wedge

 	&or;	8870	22A6	Logical or. Vee

 	&sdot;	8901	2269	Dot oper

 	&lceil;	8968	2308	Left ceiling. APL up-stile

 	&rceil;	8969	2309	Right ceiling

 	&lfloor;	8970	230A	Left floor. APL down-stile

 	&rfloor;	8971	230B	Right floor

 	&lang;	9001	2329	Left angle bracket

 	&rang;	9002	232A	Right angle bracket

&loz;	9674	25CA	Lozenge

♠	&spades;	9824	2660	Black spade suit

♣	&clubs;	9827	2663	Black club suit. Shamrock

♥	&hearts;	9829	2665	Black heart suit. Valentine

♦	&diams;	9830	2666	Black diamond suit

Note  This table uses the Times New Roman font in the ANSI character set, also called ISO Latin-1. Some high-order characters are displayed differently on Macintosh computers. Character values above 255 are in the Unicode character set.

  The euro currency symbol, at character position 128, is available in standard fonts supplied with Windows 98, Windows NT 5, and later operating systems. Supported by Codepage 874, 1250, 1252, 1254, 1255, 1256, 1257, 1258. Codepage 1251 places the euro symbol at character position 136.

See also the Special characters item in the Edit menu.

Enter characters that do not have HTML shortcuts by using the decimal code. For example, the division symbol (÷) has the ANSI decimal code 247, so you can use the symbol by entering &#247; in your document. HTML codes highlighted in color may not be commonly supported.

Column	Description

Sym	Symbol. The displayable character associated with the character code.

Code	The HTML codes used to enter the characters.

Dec	Decimal value for the character.

Hex	Hexadecimal value for the character.

Description	Descriptive name commonly associated with the character.

  Articles

  Style Topics


 Icon Symbols

An HTML draft standard, Icon symbols are a device-independent way to declare standardized pictures. Click on an icon to see its name:

The names of pictograph symbols are standardized, but the symbols displayed vary in different browsers. For instance, Internet Explorer may use the Webdings font, while another browser may display color bitmap pictures.

HTML Name	Description

&archive;	 Link to a group of documents.

&audio;	 Link plays a sound file.

&binary.document;	 Link to a non-text document.

&uuencoded.document;	 Link to a uuencoded document.

&binhex.document;	 Link to a Macintosh hexadecimal document.

&compressed.document;	 Link to a compressed archive document.

&text.document;	 Link to a text or HTML document.

&document;	 Link to a document of non-specified type.

&unknown.document;	 Link to a document of unknown type.

&calculator;	 Link to a calculator program or input calculation field.

&caution;	 Warning icon.

&clock;	 Link to current setting of an event timer, such as amount of time using a service or time in a multiple-user game.

&disk.drive;	 Link to a disk drive. May be anything that can be represented by the disk metaphor.

&diskette;	 Link to a floppy disk. Used to designate a slow device.

&display;	 Computer display. Output device.

&fax;	 Facsimile machine. Output device.

&filing.cabinet;	 Link to a large storage container. May contain multiple &folder; items.

&film;	 Link to a movie or animation sequence.

&fixed.disk;	 Fixed-disk output device. Usually, &filing.cabinet; is preferred, unless referencing the reader's own hard drive.

&folder;	 Link to a folder. A folder is a sub-directory containing files.

&form;	 Link to a form. The form is often a multiple-line input screen.

&ftp;	 Link to FTP server.

&glossary;	 Link to a glossary.

&gopher;	 Link to a connection using Gopher protocol.

&home;	 Link to a home page.

&image;	 Link to a picture. May be a bitmap, vector or live picture.

&index;	 Link to a search-able index.

&mail;	 Link to a mail message or E-mail utility.

&mail.in;	 Link to a folder containing new messages received.

&mail.out;	 Link to a folder containing user messages to be sent.

&map;	 Link to a geographical or schematic document.

&mouse;	 Mouse icon. Designates information that applies to using a mouse.

&notebook;	 Link to a list of notes.

&parent;	 Link to the parent node in a hierarchical structure. Used to visualize directory structures.

&next;	 Link to the next related document.

&previous;	 Link to the previous related document.

&printer;	 Link to a printer. Output device.

&summary;	 Link to a summary of a document.

&telnet;	 Link to a connection using Telnet protocol.

&tn3270;	 Link to a connection using TN3270 protocol.

&toc;	 Link to a table of contents.

&trash;	 Link to a waste container.

&telephone;	 Telephone Icon.

&cd.rom;	 Link to documents or media on a CD-ROM.

&cd.i;	 Link to CD-interactive.

&keyboard;	 Keyboard-only icon.

&stop;	 Severe warning icon.

&network;	 Link to a computer network.

&smiley;	 Smiling face icon.

&sadsmiley;	 Sad face icon.

&new;	 New information icon.

&play.start;	 Start an audio or video sequence.

&play.stop;	 Stop an audio or video sequence.

&play.pause;	 Pause an audio or video sequence.

&play.fast.forward;	 Skip forward in an audio or video sequence.

&play.fast.reverse;	 Skip backward in an audio or video sequence.

&work;	 Under construction icon.

&www;	 WWW icon or link to a URL.

&html;	 HTML icon or link to a document.

NOTE:  Icon symbols are rarely supported.

  Articles

  Style Topics


&archive;.

Link to a group of documents


&audio;

Link plays a sound file.


&binary.document;

Link to a non-text document.


&uuencoded.document;

Link to a uuencoded document.


&binhex.document;

Link to a Macintosh hexadecimal document.


&compressed.document;

Link to a compressed archive document.


&text.document;

Link to a text or HTML document.


&document;

Link to a document of non-specified type.


&unknown.document;

Link to a document of unknown type.


&calculator;

Link to a calculator program or input calculation field.


&caution;

Warning icon.


&clock;

Link to current setting of an event timer, such as amount of time using a service or time in a multiple-user game.


&disk.drive;

Link to a disk drive. May be anything that can be represented by the disk metaphor.


&diskette;

Link to a floppy disk. Used to designate a slow device.


&display;

Computer display. Output device.


&fax;

Facsimile machine. Output device.


&html;

HTML icon or link to a document.


 Font Compatibility

MS	MS	MS	MS	UNIX 	Lotus	Mac	ATM	ATM	Adobe
Font Name	Win	IE	Plus	Office	 	Suite	7	3	4	WebType

Abadi MT Cond Light	·	·	×	·	·	·	·	·	·	·

Andale Mono	§	×	·	·	·	·	§	·	·	·

AGaramond	·	·	·	·	·	·	·	×	×	·

Algerian	·	·	·	×	·	·	·	·	·	·

Arial	×	·	·	·	·	·	§	·	·	·

Arial Black	§	×	·	×	·	×	§	·	·	·

Arial Narrow	·	·	·	×	·	×	·	·	·	·

Arial Rounded	·	·	·	×	·	·	·	·	·	·

Baskerville	·	·	·	×	·	×	·	·	·	·

Book Antiqua	·	·	×	×	·	·	·	·	·	·

Bookman Old Style	·	·	·	×	·	·	·	·	·	·

Boton Regular	·	·	·	·	·	·	·	×	×	·

Boulevard	·	·	·	·	·	·	·	×	×	·

Braggadocio	·	·	·	×	·	·	·	·	·	·

Britannic Bold	· 	·	·	×	·	·	·	·	·	·

Brush Script (MT)	·	·	·	×	·	×	·	·	·	·

Caflish Script	·	·	·	·	·	·	·	·	×	·

Caflish Script Web	·	·	·	·	·	·	·	·	·	×

Calisto MT	·	·	×	·	·	·	·	·	·	·

Century Gothic	·	·	·	×	·	·	·	·	·	·

Century Schoolbook	·	·	·	×	·	·	·	·	·	·

Chicago	·	·	·	·	·	·	×	·	·	·

Colonna MT	·	·	·	×	·	·	·	·	·	·

Comic Sans MS	§	×	×	·	·	·	§	·	·	·

Copperplate Gothic Bold	·	·	×	·	·	·	·	·	·	·

Copperplate Gothic Light	·	·	×	·	·	·	·	·	·	·

Courier	·	·	·	·	×	·	·	×	×	·

Courier New	×	·	·	·	·	·	·	·	·	·

Courier Regular	·	·	·	·	·	·	×	·	·	·

Critter	·	·	·	·	·	·	·	·	×	·

Desdemona	·	·	·	×	·	·	·	·	·	·

ExPonto Regular	·	·	·	·	·	·	·	·	×	·

Footlight MT Light	·	·	·	×	·	·	·	·	·	·

Garamond	·	 	·	×	·	×	·	·	·	·

Geneva	·	·	·	·	·	·	×	·	·	·

Georgia	§	×	·	·	·	·	§	·	·	·

Giddyup	·	·	·	·	·	·	·	×	×	·

Giddyup Web	·	·	·	·	·	·	·	·	·	×

Giddyup Thangs	·	·	·	·	·	·	·	×	×	·

Haettenschweiler	·	·	·	×	·	·	·	·	·	·

Helvetica	·	·	·	·	×	·	×	×	×	·

Impact	§	×	·	×	·	×	§	·	·	·

Kino MT	·	·	·	×	·	·	·	·	·	·

Lucida Console	·	·	×	·	·	·	·	·	·	·

Lucida Handwriting	·	·	×	·	·	·	·	·	·	·

Lucida Sans Unicode	·	·	×	·	·	·	·	·	·	·

Mezz Web Bold	·	·	·	·	·	·	·	·	·	×

Minion Condensed	·	·	·	·	·	·	·	·	×	·

Minion Web	·	×	·	·	·	·	·	·	·	×

Monaco	·	·	·	·	·	·	×	·	·	·

Monotype.com	§	×	·	·	·	·	§	·	·	·

Myriad Web	·	·	·	·	·	·	·	·	·	×

Myriad Roman	·	·	·	·	·	·	·	·	×	·

Myriad Tilt	·	·	·	·	·	·	·	·	×	·

New York	·	·	·	·	·	·	×	·	·	·

News Gothic MT	·	·	×	·	·	·	·	·	·	·

Nueva Roman	·	·	·	·	·	·	·	·	×	·

Palatino	·	·	·	·	·	·	×	·	·	·

Penumbra Serif Web	·	·	·	·	·	·	·	·	·	×

Poetica Chancery 1	·	·	·	·	·	·	·	·	×	·

Poppl-Laudatio Regular	·	·	·	·	·	·	·	×	×	·

Playbill	·	·	·	×	·	·	·	·	·	·

Symbol	×	·	·	·	×	·	×	×	×	·

Tekton	·	·	·	·	·	·	·	ATM2	·	·

TektoMM	·	·	·	·	·	·	·	×	×	·

Terminal	×	·	·	·	×	·	·	·	·	·

Trebuchet MS	§	×	·	·	·	·	§	·	·	·

Times	·	·	·	·	×	·	×	·	×	·

Times New Roman	×	·	·	·	·	·	§	·	·	·

Times Roman	·	·	·	·	·	·	·	×	·	·

Verdana	§	×	·	·	·	·	§	·	·	·

Viva Regular	·	·	·	·	·	·	·	·	×	·

Viva Extra Bold Cond.	·	·	·	·	·	·	·	·	×	·

Webdings	§	×	·	·	·	·	§	·	·	·

Wingdings	×	·	·	·	·	·	§	·	·	·

Wide Latin	·	·	·	×	·	·	·	·	·	·

Willow	·	·	·	·	·	·	·	·	×	·

§ Available for free download from http://www.microsoft.com/typography [image] for platforms that support Internet Explorer.

  Articles

  Style Topics


Demo - No, it's not hiding here. It's only a few dollars, so why not just buy it?


 Introducing Forms


Demo - No, it's not hiding here. It's only a few dollars, so why not just buy it?


 Introducing Frames


<FRAMESET FrameSpacing = 2 Cols = "25%,*>
<FRAME Scrolling = "YES" Name = "TOC" MarginWidth = 2 Src = "list.htm">

<FRAME Scrolling = "YES" Name = "Main" MarginWidth = 0 Src = "main.htm">

</FRAMESET>


 list.htm
This HTML document is displayed in the yellow window named TOC. These windows are defined in the document named frame.htm.


 main.htm
This HTML document is displayed in the window named Main. These windows are defined in the document named frame.htm.


 TOC window

We load the page starting with frame.htm, which defines the frames and tells the browser to place list.htm in this window. The leftmost window is usually a table of contents, or list of links for navigation.

When we load a document into this window with the A tag, we use Target = "TOC" to make sure the document is displayed in the correct window.


 Main window

We load the page starting with frame.htm, which defines the frames and tells the browser to place main.htm in this window.

When we load a document into this window with the A tag, we use Target = "Main" to make sure the document is displayed in the correct window.


Introducing Style Sheets
 Introducing Styles

Styles take HTML documents from hypertext, to sophisticated page layout, with complete control of document design.

If you enjoy design, page layout or illustration, you will like creating and using styles. If you prefer data and numbers, then style sheets allow you to concentrate on content, with little concern for document design. Everybody wins.

We recommend a solid understanding of HTML before you approach styles. Styles are actually less complex than HTML, but the tasks are so different that you may find it difficult to learn both technologies together.

Cascading Styles

Styles are defined in any of three places:

We can use all three types of style definitions in a single document. Where definitions conflict, the closest definitions apply—if the separate style sheet document makes all headlines blue, we can make them purple within our document, and still make an individual headline red. In this way, we can use general definitions in the style sheet document, document-specific definitions at the top of the document, and local definitions that apply to just a word or paragraph.

Using styles is more compatible than depending on later HTML tags and proprietary extensions. Early browsers ignore styles, much as they ignore tags they don't understand. If we use tags that are supported by most browsers, and use styles to add blockbuster effects, documents look good everywhere—and they look terrific on today's browsers. While most HTML enhancements result in compatibility and reliability issues, styles keep documents compatible.

Current releases of most popular browsers, including Netscape Navigator and Internet Explorer, support styles.

Style Sheet Documents

The separate style sheet, usually named with the CSS file type extension, contains global style definitions. Any formatting not defined in this template is displayed using the browser's default formatting.

Style sheet documents offer the potential of improved performance, because the style sheet is interpreted only once when the document is loaded, and by smaller document size, since most formatting appears only once. Style sheets give us great control over document structure, while retaining compact layout.

When we maintain the formatting for our Web site in a separate file, we ensure consistency—and we can update the look of every page just by updating one style sheet.

Applying Styles

If you have used a word processor that supports named styles, you know the power of HTML styles. The P tag tells the browser to start a new paragraph; adding a Style or Class attribute tells the browser how the paragraph should look.

There are three ways to use styles in our HTML documents:

Change the appearance of all objects by creating a style sheet or style section that adds a new formatting definition. For example, change all instances of the H2 style to blue text; when we write the document, every H2 headline is blue, without requiring any change to how we use the tag.

Create a class definition in the STYLE section, and use the Class attribute with standard HTML tags to add special formatting. This method is analogous to attaching a style to a single paragraph using a word processor, instead of changing the appearance of all paragraphs.

Format just the paragraph using the Style attribute with, for instance, P, DIV, or SPAN. This method gives us great control of individual objects in the document, without affecting the rest of the document.

Example

Let's look at how to use cascading styles to change the headline from the default color to blue, to purple, and then to red. This is H2.CSS, the style sheet, redefining the H2 tag to display text in blue type:

H2	{color: blue}

Next, the main document. It begins by using the LINK tag to include the separate style sheet. It contains a STYLE section, which adds more customizations to the H2 tag.

<HTML><HEAD>
<LINK Rel = STYLESHEET HRef = "h2.css" Type = "text/css">

<STYLE Type = "text/css"><!--
H2      {font-family: Arial}
.purple {color: purple; font-style: italic}
--></STYLE></HEAD>

<BODY>
<H2>Default H2</H2>
<H2 Class = purple>Purple H2</H2>
<H2 Style = "color: red; font-family: Times New Roman">Red H2</H2>
</BODY></HTML>

Default H2
Purple H2
Red H2

Notice that H2.CSS, the separate style sheet document, changes the default color to blue, but the STYLE section in the main document changes the font to Arial; these definitions are combined as the new default.

The Class attribute in the second headline changes the color to purple and italic, using the class defined in the STYLE section; when we apply the Class = purple attribute to any HTML tag, the text is shown in purple type.

In the third headline, the Style attribute overrides the font color and the font name.

Now all we need are the details.

  Articles

  Style Topics


Style Syntax

Styles coexist with HTML tags by living within them—using different symbols and syntax. Like HTML, styles are readable, plain-text. Each style definition is called a statement; all styles follow the same general layout and look much the same:

Styles, whether in a style sheet document, within a STYLE section, or within a Style attribute, follow the same syntax rules. At the beginning of every style definition, the Selector is the name of the element to which the style applies. Everything within the pair of curly braces is a Style Block.

Frankly, styles were an afterthought, hooked-on long after HTML was designed. This is not a bad thing—it's an opportunity to create a clean, new standard, without concern for backward compatibility. While HTML tags are cramped and terse, style declarations are graceful, encouraging an open, readable writing style.

Defining Styles

If you are familiar with algebraic computer programming languages like Basic or C++, style sheets must look peculiar. Many style attributes are hyphenated words; these are not mathematical expressions using the minus operator. Think of the Selector as the variable name that receives the result of the statement.

For readability, we often use short lines, with only a single property defined on each line.

Each declaration, also called a rule, is separated by a semicolon.

H1	{color: blue;
background: white;
font-size: 24pt;
}

We can condense style declarations. Consider this example, where H1 and H2 are defined with the same attributes:

H1 {color: blue; background: white}
H2 {color: blue; background: white}

Both tags use the same formatting, so we can define them together, by specifying both names in the Selector, separated by a comma:

H1, H2 {color: blue; background: white}

Or simplify the style by separating declarations:

H1 {color: blue}
H1 {background: white}

Style syntax is flexible enough that we can combine some attributes into a short-form, specifying several properties together. This example uses border to specify three border properties with simple syntax:

.box {border: thick blue ridge;
background: #CCCCCC;
align: center;
}

Note  While border, border-color, border-style, column-rule, and several more style properties combine attributes, be careful using this feature because if one element is rejected, the whole definition may be ignored. If you are using a questionable attribute, place it last in the list, so the browser will have a better chance of correctly parsing the other attributes.

We can comment-out parts of styles so that they are ignored by browsers. In the same way !-- tags comment-out blocks of text in the HTML portion of the document, "/*" and "*/" comment-out blocks of text within styles.

/* the following line makes a very large headline */
H1	{font-size: 72pt}

This odd-looking convention is necessary because, as you will see, styles are often defined within !-- tags. Computer programmers will recognize "/*" and "*/" as comment symbols supported by the C programming language.

Style Sheet Documents

The easiest way to use styles is to create a separate style sheet document. Reference the document with the LINK tag, within the HEAD element:

<HTML><HEAD><TITLE>Home Page</TITLE>
<LINK Rel = STYLESHEET Type = "text/css" HRef = "styles.css">
</HEAD><BODY>

We often use the style sheet document as a standard template. Older browsers ignore the separate style document.

We are better off putting complex styles in separate style sheets. Style sheet documents are easier to update, and easy to use with multiple documents for consistent design. We are more likely to use complex designs if they are defined separately. When we update the style sheet document, new features are instantly available every document that references the style sheet.

When we discover style bugs or incompatibilities (and there are many—see Style Compatibility), it is easier to correct a style sheet document than to search every document for problems.

STYLE Tags

A separate style sheet document is often overkill—especially if the document uses unique color combinations, fonts, or other design elements that are not shared by other documents. We create document styles within the document HEAD section, using the STYLE tag.

When we define styles within the HEAD of the main document, it is necessary to hide the codes within comments, for compatibility with browsers that do not support styles. The STYLE tags tell the browser to look within the comments for styles. If you're sure the document will be viewed only with browsers that support styles, the comment tags are unnecessary.

<HTML><HEAD><TITLE>Style Example</TITLE>
<STYLE Type = "text/css"><!--

BODY {background-color: white;
font-family: Times New Roman, Times;
}
H2	{text-align: center;
color: blue;
font-variant: small-caps;
letter-spacing: 6px;
font-family: Arial, Helvetica;
}
B	{color: purple}

--></STYLE></HEAD>

<BODY>
<H2>Chocolate</H2>
<P>Welcome to the <B>official</B> cheese and chocolate home page.</p>

C H O C O L A T E

Welcome to the official cheese and chocolate home page.

The STYLE section in this example redefines the H2 tag to display the text centered, in blue Arial type, and bold text to be displayed in purple. Every time we use these tags in this document, they are displayed with these customizations. Browsers that do not support styles, will display H2 and B text normally.

Here is the same example, displayed by a browser that does not support styles:

Chocolate

Welcome to the official cheese and chocolate home page.

Classes

You probably don't want to redefine B to always display text in purple. A simple way to occasionally apply a style is with generic classes in the style sheet document or STYLE section. Use the Class attribute wherever you want the extra formatting.

Class name definitions begin with a period. The names may contain numbers and letters (0-9, A-Z, and a-z). Names may include hyphens, but they cannot begin with a hyphen.

.heavy {font-weight: 900}

Most HTML tags support the Class attribute, which we use to apply the extra formatting:

<P>Welcome to the <B Class = heavy>official</B> cheese and chocolate home page.</p>

We often use classes to apply formatting themes, like spot color or special fonts. To update the theme throughout the document, we now only have to change one class definition in the style sheet.

Direct Styles

Style sheet documents, STYLE tags, and classes, are wonderful, powerful tools. But what if we need special formatting just one time? Directly format tags with styles using the Style attribute.

Syntax for the Style attribute is simplified because it applies only to one use—there is no need to worry about Selectors and curly braces.

<P Style = "border: thick navy ridge; background: #CCCCCC; align: center">Chocolate</p>

Direct styles are always defined within quotation marks. Use single quotation marks (apostrophes) as quotation marks within direct style definitions.

HTML tags that support Class also recognize the Style attribute.

Notes about Styles

It is not necessary to use a STYLE tag or Type = "text/css" at the beginning of a separate style sheet document. Browsers that do not support styles will not see the separate style sheet document.

You can use a browser that does support styles to see how a document will look on a browser that does not support styles. First, make sure all important style elements are defined in a separate style sheet, and when it's time to view the document, either rename or move the style sheet document to a different location—when styles are not available, the browser uses default formatting.

Style attributes fit into several categories, based on their use. We use the categories Box, Border, Visual, Page, Color & Background, Font, List, Table, User Interface, and Aural.

See STYLES.HTM for examples.

Use a separate style sheet because long style definitions are complex to read and write, error-prone, and result in bloated documents.

The first generation of CSS, called CSS1 was largely experimental, and supported by few browsers. CSS2 is a widely-accepted standard. Except where noted, we show only CSS2 syntax. Many more esoteric styles are not well defined or supported by browsers; we offer just cursory descriptions of these styles.

Netscape 4 and Internet Explorer offer proprietary style extensions. Neither method is compatible with the other—or with anybody else—so we have followed the conventions supported by the HTML 4 and CSS 2 standard.

In the early '90s when scalable fonts first became popular and easy to use, it seemed that every document had more font sizes than an eye chart. In much the same way, styles will temporarily affect—not always for the better—the look of our documents. Everything will have three-dimensional boxes, and every word will be highlighted in a rainbow of carefully-crafted hues. And then, when the novelty wears-off, styles will become an invaluable tool.

  Articles

  Style Topics


This style element is not widely supported.


Demo - No, it's not hiding here. It's only a few dollars, so why not just buy it?


 Style: Selectors

This topic describes predefined style selectors.


Demo - No, it's not hiding here. It's only a few dollars, so why not just buy it?


 Style: Values

This topic describes style attributes and pseudo-classes.


Demo - No, it's not hiding here. It's only a few dollars, so why not just buy it?


 Style Compatibility

Every style implementation on every browser—even from the same company—is different; some things rarely seem to work right. This topic describes lists compatibility issues.


<P Style = "border: thick navy ridge; background: #cccccc; align: center">Chocolate


 Styles: Box

A box describes the appearance of elements of an object. You could remove or ignore all parts of the box, and the contents would still be recognizable.

Parts of a box include the margin, border, and padding.

Margin Properties

margin	Set the margin for all four sides of the design element. Negative margins are allowed by some implementations.

margin: 4px;

auto

length

percentage

margin-left	Set the left margin of the design element.

margin-left: auto;

auto

length

percentage

margin-right	Set the right margin of the design element.

margin-right: 0px;

auto

length

percentage

margin-top	Set the top margin of the design element.

margin-top: 12px;

auto

length

percentage

margin-bottom	Set the bottom margin of the design element.

margin-bottom: 8px;

auto

length

percentage

Padding Properties

padding	Describe how much space to leave between the border and the design element.

padding: 4px;

length

percentage

padding-left	Set the amount of space between the left border and the design element.

padding-right: 12px;

length

percentage

padding-right	Set the amount of space between the right border and the design element.

padding-right: 4px;

length

percentage

padding-top	Set the amount of space between the top border and the design element.

padding-top: 0px;

length

percentage

padding-bottom	Set the amount of space between the bottom border and the design element.

padding-bottom: 4px;

length

percentage

  Related Topics

  Style Topics


 Styles: Border

The border is the frame that surrounds an object. We can user borders with many design elements, not just tables and boxes.

Border Size

border-width	Set the width (thickness) of the border around the object.

border-width: thin;

border-width

border-left-width	Set the width (thickness) of the border to the left of the object.

border-left-width: thick;

border-width

border-right-width	Set the width (thickness) of the border to the right of the object.

border-right-width: 4px;

border-width

border-top-width	Set the width (thickness) of the border above the object.

border-top-width: medium;

border-width

border-bottom-width	Set the width (thickness) of the border below the object.

border-bottom-width: thick;

border-width

Border Color

border-color	Set the color of the border around the object.

border-color: navy;

color

border-left-color	Set the color of the border to the left of the object.

border-left-color: #000066;

color

border-right-color	Set the color of the border to the right of the object.

border-right-color: yellow;

color

border-top-color	Set the color of the border above the object.

border-top-color: white;

color

border-bottom-color	Set the color of the border below the object.

border-bottom-color: silver;

color

Border Style

border-style	Set the style of the border around the object.

border-style: groove;

border-style

border-left-style	Set the style of the border to the left of the object.

border-left-style: inset;

border-style

border-right-style	Set the style of the border to the right of the object.

border-right-style: outset;

border-style

border-top-style	Set the style of the border above the object.

border-top-style: dotted;

border-style

border-bottom-style	Set the style of the border below the object.

border-bottom-style: double;

border-style

Borders

border	Set multiple border style values with simplified syntax.

border: solid thick blue;

border-width

border-style

color

border-left	Set multiple style values for the left border of the object.

border-left: double black;

border-width

border-style

color

border-right	Set multiple style values for the right border of the object.

border-right: inset red;

border-width

border-style

color

border-top	Set multiple style values for the top border of the object.

border-top: none;

border-width

border-style

color

border-bottom	Set multiple style values for the bottom border of the object.

border-bottom: outset gray;

border-width

border-style

color

  Related Topics

  Style Topics


Demo - No, it's not hiding here. It's only a few dollars, so why not just buy it?


Styles: Visual Rendering Model
 Styles: Visual

This topic describes styles that implement the Visual Rendering Model.


Demo - No, it's not hiding here. It's only a few dollars, so why not just buy it?


 Styles: Page

This topic describes styles used with paged media.


Demo - No, it's not hiding here. It's only a few dollars, so why not just buy it?


 Styles: Color and Background

This topic describes styles that customize colors and pictures.


Demo - No, it's not hiding here. It's only a few dollars, so why not just buy it?


Styles: Font
 Styles: Font and Text

This topic describes styles that define fonts and text formatting.


Demo - No, it's not hiding here. It's only a few dollars, so why not just buy it?


 Styles: List

This topic describes styles that create lists.


Demo - No, it's not hiding here. It's only a few dollars, so why not just buy it?


 Styles: Table

This topic describes styles that modify Tables.


Demo - No, it's not hiding here. It's only a few dollars, so why not just buy it?


 Styles: User Interface

This topic describes styles that customize the user interface.


Demo - No, it's not hiding here. It's only a few dollars, so why not just buy it?


Styles: Aural (Sound)
 Styles: Aural

This topic describes styles that define the aural interface.


 HTML Compatibility

Tag 	Ver	Options

!--	2.0

!DOCTYPE	3.2

A	2.0	HRef, Name

NS1	Target

3.2	Title

ABBREV	?

ACRONYM	4.0

ADDRESS	2.0

APPLET	NS2, 3.2	Align, Alt, Code, CodeBase, Height, HSpace, Name, Param Name, VSpace, Width

AREA	IE3,3.2	Coords, HRef, NoHRef, Shape, Target

AU

B	NS1, 2.0

BANNER	?

BASE	2.0	HRef

NS	Target

BASEFONT	NS1, 3.2	Color, Face, Size

BDO	4.0

BGSOUND	IE3	Loop, Src

BIG	NS2, 3.2

BLINK	NS1

BLOCKQUOTE	NS1, 2.0

BODY	2.0	ALink, Background

3.2	Background

NS2	BGColor, Link, Text, VLink

IE2	BGProperties, LeftMargin, TopMargin

BQ	?

BR	NS1, 2.0

3.2	Clear

BUTTON	4.0

CAPTION	NS1.1, 3.2	Align

CENTER	NS1.1, 4.0

CITE	NS1, 2.0

CODE	NS1, 2.0

COL	3.2 	Align, Span

COLGROUP	4.0	Align, VAlign

COMMENT	IE

CREDIT	?

DD	NS1, 2.0

DEL	4.0

DFN	2.0

DIR	NS1, 2.0

DIV	NS2, 3.2

DL	NS1, 2.0

DT	NS1, 2.0

EM	NS1, 2.0

EMBED	NS2, 2.0	Height, Name, Palette, Src, Width, Optional Param

FIELDSET	4.0

FN	?

FONT	IE2,3.2	Color, Face

NS2	Size

FORM	NS1, 2.0	Action, Method

NS	Target

FRAME	IE3,3.2	FrameBorder

NS	MarginHeight, MarginWidth, Name, NoResize, Scrolling, Src

FRAMESET	NS	Cols, Rows

IE3	FrameBorder, FrameSpacing

H1 ... H6	NS1, 2.0

3.2	Align

HEAD	NS1, 2.0

HR	2.0

3.2	Align

IE3	Color

NS	NoShade , Size, Width

HTML	2.0

I	NS1, 2.0

Icon Symbols	4.0

IFRAME	IE3, 4.0	FrameBorder

NS	MarginHeight, MarginWidth, Name, NoResize, Scrolling, Src

ILAYER	NS4	***

IMG	2.0	Alt, Src

3.2	Align, Border, Height, HSpace, IsMap, VSpace, Width

IE3	Controls, DynSrc, Loop, Start, UseMap

INPUT	2.0	Align, Checked, MaxLength, Name, Size, Src, Type, Type = CHECKBOX, Type = HIDDEN, Type = IMAGE, Type = PASSWORD, Type = RADIO, Type = RESET, Type = SUBMIT, type = TEXT, Type = TEXTAREA, Value

INS	4.0

ISINDEX	NS1, 2.0

NS	Action

3.2	Prompt

KBD	2.0

KEYGEN	NS1

LABEL	IE4

LAYER	NS4	***

LEGEND	4.0

LH	?

LI	NS1, 2.0

NS	Type, Value

LINK	IE3, NS4

LISTING	2.0

MAP	2.0

IE3	Name

MARQUEE	IE3	Align, Behavior, BGColor, Direction, Height, HSpace, Loop, ScrollAmount, ScrollDelay, VSpace, Width

MENU	2.0

META	NS	Content, HTTP-Equiv

3.2	Name

MULTICOL	NS

NEXTID	-

NOBR	NS, IE

NOEMBED	NS4	***

NOFRAMES	NS

NOLAYER	NS4	***

NOSCRIPT	3.2

NOTE	?

OBJECT	IE3	Align, Border, ClassID, CodeBase, CodeType, Data, Declare, Height, HSpace, Name, Shapes, Standby, Type, UseMap, VSpace, Width

OL	2.0

NS	Start, Type

OPTION	2.0	Selected, Value

OVERLAY	***

P	2.0

3.2	Align

PARAM	3.2/4.0

PERSON	?

PLAINTEXT	2.0

PRE	2.0

Q	4.0

S	2.0, NS3

SAMP	2.0

SCRIPT	3.2	Language

SELECT	2.0	Multiple, Name, Size

SERVER	NS4	***

SMALL	NS2, 3.2

SNML_FOLIO	?

SOUND	Mosaic only

SPACER	NS3

SPAN	3.2, NS4

STRIKE	2.0, NS3

STRONG	2.0

STYLE	IE3, NS4, 4.0

SUB	NS2, 3.2

SUP	NS2, 3.2

TAB	?

TABLE	3.2	Align, Frame, Rules

IE3	Background, BGColor, BorderColor, BorderColorDark, BorderColorLight

TBODY	3.2

TD	3.2	Align

IE3	BGColor, BorderColor, BorderColorDark, BorderColorLight, VAlign

TEXTAREA	2.0

TFOOT	3.2

TH	3.0	Align

IE3	BGColor, BorderColor, BorderColorDark, BorderColorLight, VAlign

THEAD	3.0

TITLE	2.0

TR	3.0	Align

IE3	BGColor, BorderColor, BorderColorDark, BorderColorLight, VAlign

TT	2.0

U	2.0, NS3

UL	2.0

VAR	2.0

WBR	NS, IE

XMP	2.0

The first HTML standard was version 2.0. Many tags and attributes are introduced by MSHTML or Internet Explorer (IE) and Netscape (NS). Not all proprietary tags are supported by competitor's browsers.

  Articles


 HTML Attributes

Attribute	Tags

Accept-CharSet	FORM

Accept	INPUT

AccessKey	A, LABEL, LEGEND

Action	FORM

Align	CAPTION

Align	APPLET, IFRAME, IMG, INPUT

Align	LEGEND

Align	OBJECT

Align	TABLE

Align	DIV, H1, H2, H3, H4, H5, H6, P

Align	COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR

Align	HR

ALink	BODY

Alt	APPLET, IMG, INPUT

Alt	AREA

Archive	APPLET

Axes	TD, TH

Axis	TD, TH

Background	BODY

BGColor	TABLE

BGColor	TR

BGColor	TD, TH

BGColor	BODY

Border	OBJECT

Border	IMG

Border	TABLE

CellPadding	TABLE

CellSpacing	TABLE

Char	COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR

CharOff	COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR

CharSet	A

Checked	INPUT

Cite	BLOCKQUOTE, Q

Cite	DEL, INS

Class	A, ACRONYM, ADDRESS, B, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, I, IMG, INPUT, INS, ISINDEX, KBD, LABEL, LEGEND, LI, LINK, MAP, MENU, OBJECT, OL, OPTION, P, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR

ClassID	OBJECT

Clear	BR

Code	APPLET

CodeBase	APPLET

CodeBase	OBJECT

CodeType	OBJECT

Color	BASEFONT, FONT

Cols	FRAMESET

Cols	TABLE

Cols	TEXTAREA

ColSpan	TD, TH

Compact	DIR, MENU

Compact	DL, OL, UL

Content	META

Coords	AREA

Coords	A

Data	OBJECT

DateTime	DEL, INS

Declare	OBJECT

Dir	A, ACRONYM, ADDRESS, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HEAD, HTML, I, IMG, INPUT, INS, ISINDEX, KBD, LABEL, LEGEND, LI, LINK, MENU, META, OBJECT, OL, OPTION, P, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, STYLE, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TITLE, TR, TT, U, UL, VAR

Dir	BDO

Disabled	BUTTON, INPUT, LABEL, OPTION, SELECT, TEXTAREA

EncType	FORM

Face	BASEFONT, FONT

For	LABEL

Frame	TABLE

FrameBorder	FRAME, IFRAME

Height	IFRAME, OBJECT

height	IMG

height	APPLET

HRef	A, LINK

HRef	AREA

HRef	BASE

HSpace	OBJECT

HSpace	APPLET, IMG

HTTP-Equiv	META

ID	A, ACRONYM, ADDRESS, B, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, I, IMG, INPUT, INS, ISINDEX, KBD, LABEL, LEGEND, LI, LINK, MAP, MENU, OBJECT, OL, OPTION, P, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR

IsMap	IMG

Lang	A, ACRONYM, ADDRESS, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HEAD, HTML, I, IMG, INPUT, INS, ISINDEX, KBD, LABEL, LEGEND, LI, LINK, MENU, META, OBJECT, OL, OPTION, P, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, STYLE, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TITLE, TR, TT, U, UL, VAR

Language	SCRIPT

Link	BODY

LongDesc	FRAME, IFRAME, IMG

MarginHeight	FRAME, IFRAME

MarginWidth	FRAME, IFRAME

MaxLength	INPUT

Media	STYLE

Media	LINK

Method	FORM

Multiple	SELECT

Name	OBJECT

Name	MAP

Name	APPLET

Name	BUTTON

Name	FRAME, IFRAME

Name	A

Name	INPUT

Name	TEXTAREA

Name	SELECT

Name	PARAM

Name	META

NoHRef	AREA

NoResize	FRAME

NoShade	HR

NoWrap	TD, TH

Object	APPLET

OnBlur	BUTTON, INPUT, LABEL, SELECT, TEXTAREA

OnChange	INPUT, SELECT, TEXTAREA

OnClick, OnDblClick, OnKeyDown, OnKeyPress, OnKeyUp, OnMouseDown, OnMouseMove, OnMouseOut, OnMouseOver, OnMouseUp

 	A, ACRONYM, ADDRESS, B, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, I, IMG, INPUT, INS, KBD, LABEL, LEGEND, LI, LINK, MENU, OBJECT, OL, OPTION, P, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR

OnFocus	BUTTON, INPUT, LABEL, SELECT, TEXTAREA

OnLoad	FRAMESET

OnLoad	BODY

OnReset	FORM

OnSelect	INPUT, SELECT, TEXTAREA

OnSubmit	FORM

OnUnload	FRAMESET

OnUnload	BODY

Profile	HEAD

Prompt	ISINDEX

ReadOnly	TEXTAREA

ReadOnly	INPUT

Rel	A, LINK

Rev	A, LINK

Rows	FRAMESET

Rows	TEXTAREA

RowSpan	TD, TH

Rules	TABLE

Scheme	META

Scrolling	FRAME, IFRAME

Selected	OPTION

Shape	AREA

Shape	A

Shapes	OBJECT

Size	HR

Size	FONT

Size	INPUT

Size	BASEFONT

Span	COLGROUP

Span	COL

Src	SCRIPT

Src	INPUT

Src	FRAME, IFRAME

Src	IMG

Standby	OBJECT

Start	OL

Style	A, ACRONYM, ADDRESS, B, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, I, IMG, INPUT, INS, ISINDEX, KBD, LABEL, LEGEND, LI, LINK, MAP, MENU, OBJECT, OL, OPTION, P, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR

TabIndex	A, AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA

Target	AREA, BASE, LINK

Target	A

Target	FORM

Text	BODY

Title	STYLE

Title	A, ACRONYM, ADDRESS, B, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, I, IMG, INPUT, INS, ISINDEX, KBD, LABEL, LEGEND, LI, LINK, MAP, MENU, OBJECT, OL, OPTION, P, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR

Type	OBJECT

Type	LINK

Type	INPUT

Type	LI

Type	OL

Type	UL

Type	BUTTON

Type	SCRIPT

Type	PARAM

Type	STYLE

UseMap	OBJECT

UseMap	IMG, INPUT

VAlign	COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR

Value	OPTION

Value	BUTTON

Value	PARAM

Value	INPUT

Value	LI

ValueType	PARAM

Version	HTML

VLink	BODY

VSpace	OBJECT

VSpace	APPLET, IMG

Width	HR

Width	IFRAME, OBJECT

Width	IMG

Width	APPLET

Width	COL

Width	COLGROUP

Width	TABLE

Width	PRE

  Articles


Boilerplate Document
<HTML><HEAD>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<TITLE>Boilerplate Document</TITLE>

<STYLE Type = "text/css"><!--

H1	{color:#660000; font-weight: medium; font-size:32pt}

H2	{color:#660000; font-size:16pt; font-family: Times New Roman, Times, serif}

H3	{color:#003333}

B	{color:#003333}

I	{color:#333300}

--></STYLE>

</HEAD><BODY BGColor ="#99CCCC">

<P Align = CENTER>Short description

<HR Width = "50%">

<H1>Welcome</H1>

<TABLE Cols = 1 BGColor = "#FFFFFF" Width = "90%" Border = 0 CellPadding = 6 Align = CENTER>

<TR><TD>

<FONT Face = "Verdana, Arial">

<P>Introductory paragraph. <B>Bold text</B>, and <I>italic text</I>.

</P>

<H2>Sub-heading</H2>

<P>Additional paragraphs within this table have a white background.

</P>

</FONT>

</TD></TR></TABLE>

<ADDRESS>

<P>Your name<BR>

Address<BR>

E-mail</P>

</ADDRESS>

</BODY></HTML>


About this document
 Welcome to HTMLcat

Help files are mazes, leading us down the wrong paths, hiding vital information, and telling us more than we care (like this paragraph). We keep things simple.

HTMLcat is a virtual book: a catalog of HTML information.

If you are just beginning with HTML or HTMLcat, see Start Here.

Conventions

•	We call HTML files documents, regardless of their purpose. HTML elements are organized in groups, much as we would use equivalent commands in word processors.

•	Examples are shown in fixed-pitch type. HTML tags and attributes are in bold type, and text is grayed.

•	Results from examples are drawn within boxes.

•	Attributes to HTML tags and styles are shown in Text style, in mixed-case.

•	Style tags are shown in style-tag type, in lower-case.

•	Arguments to attributes are upper-case, in plain text.

•	Links to articles are underlined. For example, clicking Start Here takes you to that topic.

•	Some words of questionable relevance or accuracy, such as some proprietary tag attributes, are shown in gray text. These are for reference only.

•	We mention browser names only when necessary to make a distinction between manufacturers. We often say Internet Explorer  when talking about version 3 and earlier, and MSHTML for version 4 or proprietary HTML Help viewers. We say Netscape  when discussing any browser developed by Netscape Communications Corporation.

Links

•	HTML tag names are shown in upper-case, bold type. References to HTML tags on other pages are bold and underlined. For example, we say FONT on the page that describes fonts, but FONT when we discuss the tag on other pages.

•	References to other documents, whether on this computer or on the Internet, are shown in HTMLCAT.TXT style.

•	Pop-up references are shown with dotted underlines. For example, HTML pops-up a small window that describes the word. Press the ESC key, or click outside of the window, to close a pop-up window.

Illustrations

Every page in this book contains graphics, even if looks like plain text. Small pictures are bitmaps, frequently rendered twice, for medium- and high-resolution displays. If a picture is used again, there is only one copy in the book—no space is wasted.

We use vector drawings for many illustrations. These large, device-independent pictures take very little space in the book, and use colors that look good on most display devices. There are no large bitmap pictures to waste disk space.

Notice

Copyright © 1998 Richard E. Harvey, All rights reserved.

Richard E. Harvey
P. O. Box 5695
Glendale, AZ  85312  USA

  License Agreement


 Help Tips

This book doesn't look like other help files or programs. It doesn't want to. Shrink it down to a few inches wide, move it over to one side of the screen, and keep it running while you work. Whenever you need information, press ALT+TAB to find the book, then use the many navigation aids to find what you need.

Buttons

Wherever you are, the Contents button returns you to the main table of contents.

•	Current help viewers may use the Contents button to pop-up a separate contents window. Press the SHIFT key when you click the Contents button, or select the File menu, then select the "Main Contents" item, to jump to the built-in contents page.

•	The Search button pops-up a list of topics listed by keyword and subject; this is the book's index. You can find a subject even if you don't know the keyword name by looking for a related word, like italic, even though that is not an HTML tag.

•	Topics are listed alphabetically. The >> button takes you to the next page, and the << button moves to the previous page. This is a convenient way to browse this book to familiarize yourself with HTML.

•	The Tags button opens a second help window, displaying an alphabetical list of HTML tags. The Tags window opens on the left of the screen; you can change the size and position of this window, or even minimize the window, and the window will return to the top, in the same place, when you again press the Tags button.

•	The Back button returns to the previous topic you have visited. The help viewer remembers up to 40 topics, so click the Back button one or more times if you have followed several links and want to find your way back to the original topic.

•	In Windows 3.1, the History button pops-up a separate window listing help topics you have recently visited. In other versions of Windows, the History window is available from the Options menu.

•	The Register! button, which is only in evaluation copies of this book, is a shortcut to the page that explains how to register and purchase the complete book. When you register, the button is removed, to make the button bar narrower.

Keyboard shortcuts

>	Move to the next page.

<	Move to the previous page.

B	Like the Back button, back-up one page in the History list.

C	Like the Contents button. Return to the table of contents.

S	Like the Search button. Open the Search (index) window.

TAB	Move to the next link on the current page.

SHIFT+TAB	Move to the previous link on the current page.

ENTER	Jump to the selected link. If no link is selected, open the context-sensitive link list.

ESC	Close a window. If no other windows are open, close the help file.

Down	Scroll down the current page.

Up	Scroll up the current page.

PGDN	Move down one screen-full on the current page.

PGUP	Move up one screen-full on the current page.

Left	Scroll the window left. Only required if the page is too wide to fit in the window.

Right	Scroll the window right. Only required if the page is too wide to fit in the window.

The following navigation aids are available when viewing this help file:

F6	Switch between the main and Tags window. If the window is closed, pressing F6 opens it.

CTRL+TAB	Highlight all links on a page. Press this key the first time you visit a page, to familiarize yourself with the links.

H	Open or switch to the History window. Press ESC to close the window and return to this help file.

T	Open the Tags window, displaying an alphabetical list of HTML tags and other topics.

SPACEBAR	Move to the next page. Same as >>.

CTRL+PGUP	Move to the previous page. Same as <<.

CTRL+PGDN	Move to the next page. Same as >>.

BACKSPACE	Move to the previous page. Same as B.

SHIFT	Used with the mouse button, the SHIFT key inverts the purpose of some icons and buttons. If an icon displays HTML information, holding down SHIFT while you click displays style information. For example, on the Contents page, alphabetic buttons display HTML tags; with SHIFT, they display styles.

Other help files by us follow these keyboard conventions.

Document links

Links to topics are underlined, usually displayed in green. Click these keywords to jump to the underlined topic.

Links to pop-ups have dotted underlines. Click these items to pop-up a small box containing a list of related topics or a definition. When you click the mouse outside of the pop-up window, the original topic is still on the screen.

Underlined links in blue text open other documents. These files include samples furnished with this book, and Internet sites. See the Web sites item in the Edit menu for a complete list of links. Click the Display button to open the document; click the Copy button to copy the fully-qualified URL to the Windows Clipboard.

Tabs

Many topics span multiple pages. Tabbed buttons, such as the one near the top of this page, move you through related articles, and show the relationship between articles.

Icons are shortcuts

At the top of each topic, pictures are shortcuts to related topics. Click on a picture to open a pop-up list of topics; while the pop-up window is displayed, click on the [image] icon for a pop-up list of all topic categories.

•	The [image] button in the upper-left corner of every window opens the context-sensitive topic list.

•	Copy buttons and small copy icons, copy examples to the Windows Clipboard. Look for these buttons to make it easy to copy text and paste it into other applications.

Wherever you are, if the mouse pointer changes shape when you move over a picture, you can click on the picture to see a pop-up description or list. Just about everything is here to help you get around—try clicking on anything to see what it does.

Window Size

We recommend viewing this book in a window approximately five inches wide, regardless of screen resolution. This narrow window keeps lines of text short, which makes reading easier and faster. A narrow window also makes it convenient to switch between this book and your other tools. Make the window as tall as you like, as long as it does not require excessive eye movement.

 Suggested window size

The Tags window is designed to be very narrow. Allow unnecessary text to be truncated by the right border of the window.

  Articles


 Navigation Tips

Hypertext information systems, such as help files, offer multiple ways to view and browse. This book offers many more navigation paths than typical help files; there's no wrong way to browse, but some methods are more convenient at times.

You may prefer context-sensitive references, using the pop-up link lists that are on every page. Many favor one Contents page to get started, then they use context-sensitive references to move among topics.

Contents Windows

This book supports four Contents pages:

•	The main contents window is the hierarchical list at the beginning of this book.

•	The Tags list is a separate alphabetical list window. This is a sequential list of most topics, divided into tabbed groups.

•	Click a small gray [image] button to use the pop-up topics list. The topics list window is a simple, innovative way to view several hundred topics in compact lists. Click a radio button to switch to another topic list; the window title changes to the name of the list. Select an item then press ENTER, or double click the mouse, to jump to the topic. Press ESC to cancel and close the topics list window.

•	The Contents window is available when you view this book with 32-bit help viewers; the information for this page is contained in the file named HTMLCAT.CNT. This is the default window for Windows 95 or later; HTMLCAT.CNT is not needed for Windows 3.1x help viewers.

These Contents pages offer similar information, although all are organized uniquely.

Note  To save space on the screen, you may want to try placing the Tags window on top of the main window, then let it fall behind the Main window and the other applications on the desktop when it's no longer needed. The next time you want the Tags window for navigation, press the F6 function key or click the Tags button to bring it to the top.

Note  Hold down a SHIFT key when you click a button to open the pop-up topics list to open a list of related style information instead of HTML information.

Remember the menus. Several menu items are shortcuts to frequently used tools.

Opening Contents

•	Click the Contents button or press the C key to jump to the Contents page. If you are using Windows 95 or later, this button opens the separate contents window.

•	Select the File menu, then select the "Main Contents" item to jump to the built-in contents page. This switches to the main built-in Contents page, regardless of the help viewer version.

•	Click the right mouse button, then select "Main Contents" from the pop-up menu. This switches to the main built-in Contents page, regardless of the help viewer version.

•	Click the Tags button or press the T key to open or switch to the separate alphabetical list window.

•	In the Windows link (shortcut) to this help file, use the -K command line switch to force Windows help to start at the main contents window:

WINHLP32.EXE -K Contents HTMLCAT.HLP

•	Some third-level topics are ignored when you move through the built-in table of contents by clicking the >> and << buttons. This is intentional, to minimize showing unnecessary information. To view these contents entries, click the plus (+) box on the topic; the >> and << buttons will still take you between higher-level contents entries.

Restoring Windows

It's easy to get lost in a sea of open windows. HTMLcat offers simple ways to find your way back to the top. These features are unique to HTMLcat.

•	If you are looking at the main window and the Tags window is minimized or lost somewhere on the screen, press the F6 function key or click the Tags button to restore the window. The size and shape of the window are not changed.

•	If you are looking at the Tags window and the main window is buried or minimized, press the F6 function key or click the stylized triangular change-window icon at the top of the Tags window to restore the main window.

•	If you are using Windows 3.1x and you have closed the main window but the Tags window is still visible, click the triangular change-window icon in the Tags window to restore the main window, or close the Tags window to close this book.

Built-in Contents

When viewing this book with a 32-bit help viewer, the Contents button pops-up a separate contents tree window. If you don't like the separate Contents window, you can make the Contents button use the built-in contents page. Follow these steps to use only the built-in contents page:

•	Close this help file.

•	Delete the file HTMLCAT.GID. The file may be hidden; if you are using Windows Explorer, select View-Options, then make sure "Show all files" is selected.

•	Make a backup copy of HTMLCAT.CNT. Delete or rename HTMLCAT.CNT. The file named HTMLCAT.CNT contains data for the pop-up contents window.

•	Open this help file again. Windows will automatically recreate HTMLCAT.GID the next time you view this help file.

If you decide later to use the separate contents window, restore HTMLCAT.CNT, then close and reopen the help file.

You can also force the help viewer to create a new copy of HTMLCAT.GID, without your having to first delete the original file, by starting WINHLP32.EXE with the -G command line switch. This method is inconvenient because we usually don't start help files by typing command line arguments.

  Articles


 Glossary

a b c d e f g h i j l m n o p r s t u v w x

_blank

_parent

_self

_top

————
     a

Anchor

Andale Mono

Animated GIF

ANSI

Anti-aliased

Applet

Arial

Arial (font sample)

Arial Black (font sample)

Arial Narrow (font sample)

ASCII

ASCIIcat

————
     b

Baskerville (font sample)

_blank

Bitmap Picture

BMP

Body

Browser

————
     c

Case-sensitive

Century Gothic (font sample)

Chrome Effects

ClearType

Clipart

Comic Sans MS (font sample)

Compatibility Icon

Compiled HTML

Container

Courier New (font sample)

CSS

cursive

Cyberdog

————
     d

Deprecated

DHTML

Dithered Color

DLL

Domain

DTD

Dynamic HTML

————
     e

ECMA

ECMAScript

EN

Esquilax

euro

————
     f

fantasy

FOCACA

Form

Frame

————
     g

Garamond (font sample)

Georgia (font sample)

GIF

————
     h

Head

Hex

Hex Triplet

Home page

Hot spot

HTML

HTML Help

Hypertext

————
     i

ICP

IETF

Impact (font sample)

Intellifont

Internet

ISO

ISP

————
     j

Java

JavaScript

JPEG

JScript

————
     l

Language variants

Link

Loss-less

Lossy

LZW

————
     m

MIME

Mnemonic

monospace

Monotype.com

Mosaic

MSHTML

————
     n

Netscape

————
     o

Obsolete

OLE

Opera

————
     p

Palette flash

_parent

Parser

PGML

Pixel

Plug-in

PNG

POTS

Primary colors

Project Chrome

————
     r

RGB

RSAC

————
     s

sans-serif

Script

Secondary colors

_self

serif

SGML

SMIL

Speedo

String

Style

————
     t

Table

Times New Roman (font sample)

_top

TrueDoc

TrueType

Type 1

————
     u

Unicode

URI

URL

————
     v

VBScript

Vector Picture

Verdana

Verdana (font sample)

————
     w

W3C

Webdings

Web Explorer

Web-safe

whitespace

Wingdings

WORA

WWW

————
     x

XBM

XML

XPM

XSL

  Articles


_blank
Attribute used with the A tag Target attribute to load the document into a new, blank, unnamed window.


_parent
Attribute used with the A tag Target attribute to load the document into the current document's parent window.


_self
Attribute used with the A tag Target attribute to load the document into the current window.


_top
Attribute used with the A tag Target attribute to load into the full browser window, eliminating any frames. This attribute is useful to restore the document to full-screen when frames accidentally become nested.


Anchor
The name of a place marker. Also called a link. We create anchors with the A tag Name attribute. We reference anchors with the A tag HRef attribute.


Andale Mono
A fixed-pitch sans-serif TrueType font created Monotype corporation primarily for smooth display of HTML documents on browsers. Andale Mono is an updated version of Monotype.com, and it should always be used in place of Monotype.com.

http://www.monotype.com


Animated GIF
A picture containing several GIF pictures that share a single color palette. The pictures are displayed one-after-another, at the same position on the screen, with a predetermined delay between pictures.


ANSI
Pronounced an · see. American National Standards Institute. Defines important computer and software conventions. One of the most recognizable ANSI standards is ISO-1250, which defines the character set used by many computers. ASCII has also defined standards.


Anti-aliased
The process of smoothing hard edges on diagonal or curved lines in pictures to blend objects together or make the edge smoother. Anti-aliased pictures use pixels of intermediate shades between the color edges. For example, to smooth a black and a white edge, the transition uses one or more gray pixels. This example shows the letter A, using anti-alias techniques to smooth the lines.

On the other hand, an aliased picture does not blend objects. On magnification, an aliased picture shows clear stair-stepping on the edges of objects.

A similar technique, called dithering, uses pixels of similar colors to add the appearance of a greater number of colors.


Applet
A utility program written in a high-level language, such as Java. Applets are small programs, while scripts are macros, written in JavaScript or VBScript, that customize how HTML documents are displayed.


Arial™
Standard sans serif style. Similar to Helvetica or Swiss. A scaleable, TrueType font. Quickly being replaced by Verdana for Web site development. This text is Arial. Arial font sample.


ASCII
Pronounced as · key. Acronym for American Standard Code for Information Interchange. ASCII codes use an 8-bit value to represent characters The Standard ASCII character set uses the first 128 values (0-127). The characters represented by high-order numbers (128-255) are dependent on the computer type; for IBM–PC compatibles, these are called PC–8 or code page 437 (English). In Windows, a common character set is ISO-1250, or often simply called ANSI.


ASCIIcat
A free indispensable reference for writers, programmers, illustrators, editors, and HTML designers. A Windows help file with character and conversion tables, hex-decimal-binary-octal, formulas and units, fractions, Codepages, color swatches, calendar, even grammar and spelling, and more. When ASCIIcat is installed in the same directory as HTMLcat, ASCIIcat is added to the Edit menu.

http://ourworld.compuserve.com/homepages/r_harvey/asciicat.htm


Bitmap Picture
Bitmap pictures, also called raster pictures, are made of a grid of color dots (or bits). Each pixel on the screen corresponds to a single bit in the picture. By changing the color of individual pixels, we can paint a picture of virtually anything. While Vector pictures can be scaled for any output device, bitmap pictures are best used at the same screen resolution they were created in; when enlarged, bitmap pictures show jagged, pixelized edges. Popular bitmap picture file formats include BMP, GIF, and PNG.

The resolution of the picture is the width and height of the picture, in pixels. The color depth is the number of bits used to represent each pixel; a 1-pixel picture can show two colors (black and white), a 4-bit picture can represent 16-colors; an 8-bit picture can represent 256 unique colors. Many Internet pictures use 24-bit color, for 16-million unique colors. The more colors, the larger the picture file.


BMP
Bitmap picture file format. May contain 1-, 4-, 8- or 24-bit colors; usually uncompressed.. Rarely used on the Internet. Supported by MSHTML. Use GIF for better compression of 8-bits or fewer; use JPG for high-compression of 24-bit color pictures.


Body
The main text portion of a document.


Browser
A popular type of HTML rendering device used by personal computers connected to the Internet.

Browser programs include Acorn-Browse, AIR Mosaic, ANT Fresco, Avanti, Amiga-A-Web, Amiga Voyager, Arc Web, Cyberdog, Echo, France Explorer, Hot Java, IBM-Web Explorer, I-Browse (Amiga), InterGO, Lotus-Notes, Lynx, Mac Web, MSHTML, Internet Explorer, Pocket Internet Explorer, Mac Web (Macintosh), Mercer OS, NCSA Mosaic, Net Positive (Be OS), Netscape Communicator, Netscape Navigator, Near Site, Opera, Palmscape (Palm Pilot), Quarterdeck Mosaic, Spry Mosaic, Spyglass Mosaic, Voyager (Acorn), Web Compass, Webster XL (Acorn), Web Whacker.


Case-sensitive
Used in comparisons of strings. Case-sensitive comparisons differentiate between upper-case A-Z and lower-case a-z, while case-insensitive comparisons treat A-Z and a-z as equivalent. Most Internet URL strings are case-sensitive.


Chrome Effects
Project Chrome

Project Chrome is the code-name for Chrome Effects, an Internet Explorer 5 technology that extends XML and DirectX with extensive multimedia support and 3-D. The goal is high-quality graphics for presentations and games, with a minimal amount of data transferred over the Internet, to keep performance high and network traffic to a minimum. High hardware requirements (300MHz processor, 128MB of memory) and changing marketing plans may result in this technology being incorporated in other products, and the use in Internet Explorer de-emphasized


ClearType

Techniques developed for Microsoft Windows and introduced in 1999, to improve the appearance of fonts on computer screens.

http://www.microsoft.com/typography


Clipart

Pronounced clip-art. Groups of pictures offered as a single package. Clipart collections are available from software stores; many bitmap picture editors include clipart selections. Some clipart pictures are public domain, but most are copyrighted, with some restrictions on their resale. Many use clipart as starting points or inspiration when creating new designs, but few use clipart pictures without modification.


Compiled HTML
HTML Help

Destined to replace Windows Help files, HTML Help files are based on MSHTML extensions, with the CHM file extension. HTML Help supports child, embedded, and pop-up windows, and the latest features. While help files offer approximately 50% compression, HTML Help claims 80% compression,

http://www.microsoft.com/workshop/author/htmlhelp/


 Compatibility Icon
Wherever you see the compatibility icon, click for information about proprietary, non-standard, or rarely-supported features. Avoiding dependencies on proprietary features makes our documents accessible by more readers.


Container
An object that holds one or more other objects. A container is a way to represent several objects with a single name. Counties are objects within a state container; states are objects within a nation container.


CSS
Acronym for Cascading Style Sheet. Styles can be defined in a separate style sheet document, at the top of the current document, or within individual HTML tags. Each level of definition can override attributes set by the next higher style definition.

http://www.w3.org/TR/1998/REC-CSS2-19980512


cursive
An ornate script or calligraphic type face design. Letter forms flow, as if hand-written. Examples include Brush Script, Caflish, Ex Ponto, Monotype Corsiva, Park Avenue, Swing, and Zapf Chancery. This category is broadly defined, with many dissimilar fonts that share hand-written forms.


Cyberdog™
Internet browser designed for Apple™ Macintosh™ computers.

http://cyberdog.apple.com


Deprecated
An HTML tag or attribute is outdated. The element has been superseded by a new design element, and may be eliminated in a later version.


DHTML, Dynamic HTML

Methods for combining scripts, style sheets, HTML extensions, downloadable content and fonts, to create interactive Internet documents. DHTML offers the promise of greater control over the real-time appearance, content, layout, and behavior of documents. DHTML, while a significant and complex enhancement, is subject to proprietary implementations and competing standards.


Dingbat
Also called Pi, Dingbats are families of fonts that contain symbols and typographical ornaments. Examples include Zapf Dingbats and Webdings.


Dithered Color
Like halftone pictures in newspapers, dithering uses patterns of color pixels to replace pure colors. A picture using dithering to smooth transitions between objects is called anti-aliased. Dithering is used to simulate colors, especially for computers that can represent a limited number of colors. For example, combine patterns of red and yellow to simulate orange, like this:


DLL

Dynamic Link Library. A separate program utility file that contains frequently-used functions that are called by the main program. This product uses a DLL named HTMLCAT.DLL, which contains functions and data that extend the power and usability of this book.


Domain
The address of a computer connected to the Internet.


DTD
Document Type Definition.


ECMA
European Computer Manufacturer's Association. Like ANSI, ASCII, and ISO, ECMA defines computing standards.

http://www.ecma.ch/


ECMAScript
European Computer Manufacturer's Association (ECMA) standard Web scripting language. The standard is called ECMA-262, based on JavaScript.

http://www.ecma.ch/stand/ecma-262.htm


EN
English. A two-character abbreviation of a language name.


Esquilax
A legendary horse, with the head of a rabbit, and the body of a rabbit. The running Esquilax has been our logo since 1983.

http://ourworld.compuserve.com/homepages/r_harvey/


 euro
The proposed standard currency used by the European Union. Introduced in some countries in January, 1999, with wide acceptance expected by 2002, the euro includes currency and coins. The euro sign, shown at the top of this page, is supported by Windows 98, Windows NT 5, and later operating systems.

http://europa.eu.int/euro/html/home5.html?lang=5


fantasy
One of many highly-stylized, eccentric type face designs. Examples include Critter, Giddyup, Matisse, Comic Sans MS, and modern grunge fonts. Fantasy font designs may be serif or sans-serif, but they are always distinctive.


Form
One or more data input fields that the user fills-in. Data from the completed form is returned to the sender by the browser.


Frame
A cell in a multiple-window display.


FOCACA
Freedom of choice among competing alternatives.


GIF
Compressed bitmap picture file format. Acronym for Graphics Interchange Format. Introduced by CompuServe, GIF uses LZW compression for images with 256 or fewer colors. Pictures compress well without quality loss. A newer version, GIF24, offers 24-bit support, for 16-million colors, GIF24 is rarely supported. GIF pictures do not contain information about the screen resolution, which means pictures are not scaled to the computer's screen resolution.

Good for logos and icons that use few colors and smooth textures. Use Animated GIF for special video effects. Use JPG for higher compression.


Head
The top of an HTML document. The head contains information describing document contents. Document text is in the Body.


Hex
Hexadecimal. The base-16 number system. The numbering system used to represent groups of four binary digits. This is base-16, represented by digits 0-9, followed by the letters A-F. Hexadecimal is often abbreviated as Hex. See Hex Table


Hex Triplet
A six-digit Hex value representing an RGB color value. Two Hex digits describe each of three colors. See Hex Table


Home page
The main HTML document, often named INDEX.HTM, that is the first document the browser loads when visiting an Internet site. This document is the starting point, offering information about your site, and links to other documents or other Internet sites.

INDEX.HTM


Hot spot
An area of a picture that, when clicked with the mouse or selected with a key, causes an the browser to cause event, such as opening a document.


HTML
Hypertext document specification following SGML (Structured Generalized Markup Language) layout and formatting standards.


Hypertext
Computer-based text database with methods for finding relevant information on topics. Hot-spots reference relevant topics; select or click references to jump to related information.


ICP
Internet Content Provider. Instead of requiring the viewer to visit an Internet site, Push technology allows ICPs to broadcast personalized content directly to the computer without the user first requesting the information.


IETF
Internet Engineering Task Force.


Intellifont™
Font technology introduced by Agfa. Used by some Hewlett-Packard printers. While PC-compatibles often use TrueType fonts, Intellifont is the font technology preferred by Amiga computers.


Internet
An organization of institutional, government, and commercial computers. Started by the United States Department of Defense in 1969 as ARPANET.


ISO
International Standards Organization. Like ANSI, ASCII, and ECMA, ISO defines computing standards.


ISP
Acronym for Internet Service Provider. A company or organization that provides local access to the Internet.


Java
A high-level programming language based on C++, and used for writing portable applications that are not dependent on one operating system or microprocessor. A subset, called JavaScript, is used for writing many SCRIPT utilities.

http://java.sun.com


JavaScript
Often called a subset of Java, and similar to ECMAScript, JavaScript is the high-level macro scripting language used with many HTML documents. JavaScript extends HTML, making it possible to customize how documents are displayed based on conditions, browser model, and user response. With scripting and browser enhancements, HTML becomes Dynamic HTML.


JPEG, JPG
Pronounced jay · peg. Highly-compressed bitmap picture file format. From Joint Photographic Experts Group. A lossy compression method that reduces image quality to reduce image size. Use GIF or PNG for higher resolution.


JScript
Proprietary implementation of JavaScript supported by Internet Explorer and MSHTML.


Language Variants
Used with the A and LINK tag's HRefLang attribute to specify the language encoding of a document or a portion of a document. Most variant names are two characters; an extended code may follow a hyphen, for instance, en-US is U.S. English. Experimental languages begin with x-. Language names include:

ar	Arabic	it	Italian

da	 	ja	Japanese

de	German	nl	Dutch

el	Greek	pt	Portuguese

en	English	ru	Russian

es	Spanish	sa	Sanskrit

fr	French	ug	Uigur

he	Hebrew (replaces iw)	ur	Urdu

hi	Hindu	yi	Yiddish (replaces ji)

id	Indonesian (replaces in)	zh	Chinese

i-navajo


Link
The name of a place marker. Also called an anchor. We create anchors with the A tag Name attribute. We reference anchors with the A tag HRef attribute.


Loss-less
Term for data compression methods that reduce the size of data without loss of detail. Unlike lossy compression, used by JPG, loss-less compression uses highly-efficient compression methods that do not change the appearance of the picture. GIF and PNG pictures use loss-less compression.


Lossy
A compression method used with JPG pictures. Lossy compression represents each image as rectangular mosaic patterns. Especially useful for photographs, where the slight loss of detail is more than compensated for by the small file size. Sometimes disparagingly called pixel-sort compression because of the apparent random reorganization of some pictures.


LZW
Lempel-Ziv-Welsh data compression algorithm. The LZW patent is owned by Unisys, and licensed to software companies who need to add high-quality file compression to their products. The Internet uses LZW compression for GIF pictures; bitmap picture editor and browser companies pay a fee to Unisys for the right to use LZW compression in their products. The PNG picture format, which does not use LZW, was introduced to replace GIF with a portable file format that does not require licensing.


MIME
Multipurpose Internet Mail Extensions. Standards defining the format of Internet messages. Mime types include the following:

AIF	audio/aiff	MID	audio/mid

AU	audio/basic	MOV	video/quicktime

AVI	video/avi	MPG	video/mpeg

BMP	image/bmp	PDF	application/pdf

CSS	text/css	PNG	image/png

GIF	image/gif	QT	video/quicktime

HTM	text/html	RMI	audio/mid

JPG	image/jpeg	SND	audio/basic

M1V	video/mpeg	WAV	audio/wav


Mnemonic
Pronounced ne·mon·ik. A word trick used to make a complex or forgettable phrase easier to remember. Mnemonic words are coined from abbreviations, contractions or acronyms. For instance, the term RISC (Reduced Instruction Set Computer) is descriptive, but it also denotes apprehensions felt by the original planners.


monospace
Standard fixed-pitch font, usually uniform line weight. All characters of the same point size are the same width. Examples are Console, Courier, Courier New, and Andale Mono.


Monotype.com
A fixed-pitch sans-serif TrueType font created Monotype corporation primarily for smooth display of HTML documents on browsers. This font was used and distributed for most of 1998, but it has now been replaced by Andale Mono, which is a later, smoother design.

http://www.monotype.com


Mosaic
The original Internet hypertext web browser. A predecessor of Netscape and other modern Internet tools. Written between January and March 1993 by Mark Andreessen and Eric Bina at NCSA (National Center for Supercomputing Applications), Mosaic was composed of just 9000 lines of code (modern browsers may contain several million lines of code). NCSA Mosaic home page:

http://www.ncsa.uiuc.edu/General/NCSAHome.html


MSHTML
Proprietary extensions to HTML introduced for and used by Internet Explorer, HTML Help, and related products. Defined as the rendering engine and parser for Internet Explorer 3.0 and later, with support for ActiveX™ Controls, Active Document, and windowless controls. MSHTML is not an HTML standard, nor is it supported by other browsers or rendering devices.

http://www.microsoft.com/ie


Netscape™
We say Netscape when describing browsers created by Netscape. Netscape is a software company, formed in 1994 by Mark Andreessen, formerly of the National Center for Supercomputing Applications (NCSA), and the original author of Mosaic, Netscape products include Navigator, Communicator, and networking tools.

http://home.netscape.com [image] Netscape home page

http://www.mozilla.org/ [image] Browser source code


Obsolete
Describes HTML tags and attributes that are no longer recommended. Tags are made obsolete when more advanced or simpler substitutes are available. Obsolete tags are usually supported by current browsers, but support is not required, and may be removed at any time.


OLE
An acronym for Object Linking and Embedding. A proprietary method that allows a container object (a document) to contain another object. Changes to the embedded object are displayed in the container.


Opera
Popular, modern Internet browser designed for several computer platforms. From Norway. Version 3 is HTML 3.2 compatible. Version 4 adds style sheets and HTML 4 compatibility.

http://www.operasoftware.com


Palette Flash

When a Web page uses more colors in the document or pictures than the display device can display, the browser must occasionally change the video palette. This often causes the screen to flicker, or colors to be rendered inaccurately. Palette flash is especially apparent in 256-color video modes. Use only the 216 Web safe colors to help minimize these problems.


Parser
Computer languages have words, grammar and rules—just like spoken languages. Parsers are computer programs that interpret commands written in these languages and translate them to commands the computer can understand. The MS-DOS command parser is COMMAND.COM; it interprets text we enter and translates it into commands DOS’ language. Parsers are sometimes known as Lexical analyzers.


Pixel
Contraction of picture-element. A single dot, usually color, on display device or in a digital picture.


PGML
Precision Graphics Markup Language. A standard for displaying 2D vector graphics on the Internet. Vector drawings are smaller than bitmap pictures, so they download quickly. The PGML file format is based on PostScript and PDF (Portable Document Format). Introduced by Adobe Systems in April, 1998, and supported by browsers by using plug-ins.

Http://www.adobe.com


Plug-In
A utility program called by the browser, often used to display pictures or play sounds. Plug-ins extend the power of the browser by adding new functionality.


PNG
Acronym for Portable Network Graphics. New, highly-compressed loss-less picture format that uses the public-domain ZLIB compression method instead of LZW. Similar to GIF in use, but not widely supported by browsers. Called PNG-8 (for 8-bit color) and PNG-24 (for full 24-bit color), and future 48-bit color, PNG goes beyond transparent backgrounds by offering partial transparency; this makes it possible to do a smooth transition from the edge of an image to the background color.

PNG is supported by Netscape 4.04, MSHTML 4.0b1, SpryNet Mosaic, and later browsers; not supported by NCSA Mosaic or Opera 3.


POTS
Plain-old telephone service. Mr. Bell's telephone lines of a century ago, still in use in the digital world.


RGB
The three colors, red, green, blue. Called the primary colors, represented in Hex, they combine to specify all RRGGBB screen or font colors.


RSAC
Recreational Software Advisory Council. Rates Internet sites and maintains a standard rating vocabulary, named RSACi. Supported by MSHTML.

http://www.rsac.org


sans-serif
In type design, a font without flared serifs at the end of strokes. Most sans-serif font designs have uniform line weight and simple, clean design. Examples include Arial, Gill Sans, Helvetica, Swiss, Univers, and Verdana.


Script
A high-level macro. Often written in JavaScript. Also a type or writing style, with continuous handwriting-like characters..


serif
In type design, a serif is a small stroke at the end (or terminal) of strokes on seriffed fonts. Examples include Charter, Cyberbit, Garamond, Georgia, Century Schoolbook, Minion Web, Times and Times New Roman. Fonts without serifs are called sans-serif.

In context of HTML styles, serif is a generic font name, representing any seriffed font available on the computer.


SGML
Structured Generalized Markup Language. Defines the logical organization of a document and syntax of layout elements.

http://www.sgmlsource.com/8879rev/n1929.htm


SMIL
Synchronized Multimedia Integration Language, pronounced Smile.  SMIL documents follow XML conventions, to create multimedia presentations.

http://www.w3.org/TR/REC-smil


Speedo™
Font technology introduced by Bitstream. Used by some X-windows computers. While PC-compatibles often use TrueType fonts, Speedo is the font technology preferred by Atari ST and Falcon computers.

http://www.bitstream.com


String
A group of ASCII characters delimited by quotation marks. Strings are used as arguments within HTML tags and by all computer programming languages. Strings may contain ASCII characters with values 32-126. See Character Conversion for examples of ASCII characters.


Style
An object that describes document formatting, such as color, font and size. Styles can be defined in a separate style sheet document, at the top of the current document, or within individual HTML tags. Examples are in STYLES.HTM [image].

http://www.w3.org/TR/1998/REC-CSS2-19980512


Symbol
Computerdom is no different than the real world: there are symbolic ways to express almost everything. Money and cars are expressions of wealth; family and peace are symbols of happiness. The problem is the symbols we choose, compounded by the limited number of ways computers have to express things.


Table
A rectangular grid of cells. Traditionally, containing tabular data; in HTML, tables are used to draw borders, change background colors, and create multiple-column documents.


TrueDoc™
A patented method for interpreting character shapes in any font, and storing them highly-compressed form for easy handling. The font shapes can be used at any resolution on any computer. Created by Bitstream, and licensed by Corel Corp., Macromedia Inc. Netscape, Novell Inc. and Spyglass Inc. Used in Netscape 4.

http://www.bitstream.com


TrueType™
Introduced in Microsoft™ Windows 3.1 in 1992, and owned by Apple™ Computer Corp., TrueType is a scaleable vector font file standard for display and printing.

http://www.microsoft.com/typography


Type 1
Scaleable vector font technology introduced by Adobe Systems. Type 1 fonts are supported by Adobe on Macintosh, Windows and X, using proprietary drivers.

Http://www.adobe.com


Unicode™
Pronounced you · knee · code. Introduced in June 1992, Unicode is an international standard character set. The original ASCII and ANSI standards defined 8-bit character sets, which contain 256 characters. Unicode is a 16-bit standard with up to 65,536 unique characters and symbols. Some TrueType fonts support Unicode. Unicode trademark owned by Unicode, Inc.

http://www.unicode.org


URI
Uniform Resource Identifier. A case-sensitive description of a resource on the Web. Resources include documents, pictures, programs and data files. The URI includes the name of the mechanism (usually "http:"), the host computer (the Internet address), and the resource name (the file name). Parts of a URI are similar to disk directories and file names used by personal computers. This term is quickly replacing URL because it is more descriptive; URL is a subset of URI. In the following example, the mechanism is "http", the host is "ds.internic.net", and the resource is "/rfc/rfc1630.txt".

http://ds.internic.net/rfc/rfc1630.txt


URL
Uniform Resource Locator. A string identifying a resource, such as a Web site or document, on the Internet. A subset of the URI resource identifier.

http://ds.internic.net/rfc/rfc1808.txt


VBScript
A high-level, proprietary macro scripting language. Unlike JavaScript, which is similar to Java and C++, VBScript follows syntax conventions similar to the Basic programming language. Supported by MSHTML.


Vector Picture
Vector pictures are line drawings. Instead containing bitmap pictures, line drawings are made of numbers representing individual lines, shapes and text in the picture; the program interprets the shapes, and recreates the picture at the current display resolution. Created by drawing and illustration programs like Adobe Illustrator, Corel Draw, Macromedia Freehand, and Micrografx Designer. Often used for large illustrations because of flexibility, scalability, and efficient file size. Displayed on the Internet in the PGML file format.


Verdana
Modern sans serif font for low resolution display and printing. A scaleable, TrueType font. Readable in any type size; the larger, the more sophisticated and detailed it looks. Furnished with Internet Explorer 3.0 and later; available free.

http://www.microsoft.com/typography


W3C
The World Wide Web Consortium. Jointly run by MIT Laboratory for Computer Science, the National Institute for Research in Computer Science and Control in France, and Keio University in Japan, with membership of more than 220 organizations.

http://www.w3.org


Webdings™
A TrueType font designed for Internet Explorer, to represent Internet Icon Symbols. Don't confuse Webdings with the Wingdings font!

http://www.microsoft.com/typography


Web Explorer
Internet browser designed for IBM OS/2™.

http://www.networking.ibm.com/WebExplorer/


Web-safe
A set of 216 standard colors using a limited, standard, palette for compatibility. Limiting our pictures and HTML objects to just these 216 colors makes our documents compatible with more browsers and computers, because they minimize palette conflicts. Palette conflicts can cause unexpected color dithering and palette flash, as the video palette is changed to display additional objects.


whitespace
In style definitions, a character that is displayed as a blank. Whitespace characters separate HTML tag attributes and style attributes, Whitespace characters include the Tab (character 9), linefeed (10), form-feed (12), carriage return (13), and space (32).


Wingdings
A TrueType font designed by Microsoft to represent computer symbols and icons with scaleable characters. A Dingbat, or symbol font, Wingdings contains only artistic icons, no characters A-Z.

http://www.microsoft.com/typography


WORA
Acronym for Write Once, Run Anywhere. A goal of the Java programming language is portability—the ability to write a program, and run it without change on several incompatible computers and operating systems. Commercial software is written for performance, using hardware features and operating system tools, in the microprocessor's native language. WORA suggests that it may be possible to eliminate platform-dependencies without severely limiting functionality or performance.

http://www.javalobby.com/


WWW
World Wide Web. A network of computers connected on the Internet, providing a standard method to access files and data. Supported by standards defined by W3C for HTML document layout and protocol.

http://www.w3.org


XML
Extensible Markup Language. A proposed standard, based on SGML, for flexible display of data-based documents.


XBM
Compressed bitmap picture file format.


XPM
Compressed bitmap picture file format.


XSL
Extensible Style sheet Language, proposed by Arbor Text, Inso and Microsoft. Assists in the display of XML documents. Potentially more flexible than CSS style sheets.


Primary Colors
The three primary colors, red, blue and green, are purest and most accurate because computer monitors use these three colors. We use in varying intensity (brightness) to create all RGB colors.


Color Wheel
The primary colors are combined to create secondary colors. Combine equal levels of three colors to make shades of gray.


Secondary Colors
Combine two primary colors to create a secondary color. For example, red plus green is yellow.


ABSBOTTOM
Align the object with the bottom of the lowest object on the current line.


ABSMIDDLE
Align the middle of the object with center of the text on the current line.


BASELINE
Align the bottom of the object with the baseline of text on the current line.


CENTER
Horizontally center-align the object.


BOTTOM
Align the bottom of the object with the baseline of text in the current line. Same as BASELINE.


LEFT
Align the object with the left margin.


MIDDLE
Align the middle of the object with the text on the current line.


RIGHT
Align the object with the right margin.


TEXTBOTTOM
Align the bottom of the object with the bottom of surrounding text.


TEXTMIDDLE
Align the middle of the object with the middle of lower-case characters (x-height) in the paragraph.


TEXTTOP
Align the top of the object with the top of the largest text on the current line.


TOP
Align the top of the object with the top of the tallest item on the current line.


CIRC
Circle. Requires three Coords coordinates: centerX, centerY, radius.


CIRCLE
Circle. Requires three Coords coordinates: centerX, centerY, radius. Same as CIRC


RECT
Rectangle. Requires four coordinates.


RECTANGLE
Rectangle. Requires four coordinates. Same as RECT


POLY
Polygon. Coords requires three or more pairs of attributes defining image regions.


POLYGON
Polygon. Coords requires three or more pairs of attributes defining image regions. Same as POLY


Copyright
 Copyright Notice

HTMLcat Evaluation Version

This is an evaluation copy of this book. This is not free software. You may use this book for up to 14-days for the purpose of evaluation only. Within a few days if you have received fair value from this book or you are still using it, you must purchase a licensed version. If you do not pay for this book, you cannot legally or ethically use it. If you do not agree with this policy, please delete this book from your computer now.

Carefully read the copyright statement. Your use of this book indicates your acceptance of this limited license agreement.

See How to register for prices and registration information.

Copyright © 1998 Richard E. Harvey, All rights reserved.

For the purpose of this document, "book" refers to this computer document and any additional information, documentation, sample files, or other material accompanying this product.

Intellectual property is a possession, much like any other property. By receipt of these materials the user agrees to abide by applicable copyright laws. Without support of copyright laws, there would be little incentive to create new products. Unauthorized copying of computer software is a felony, punishable by fines of up to $250,000 and prison terms of up to five years.

No part of this publication may be stored in retrieval systems, transmitted, or reproduced in any way, including but not limited to photocopy, photography, magnetism or other recording method without express written permission of Richard E. Harvey.

Information in this document is subject to change. The software described in this document is furnished under a license agreement. The software may be used or copied only in accordance with the terms of that agreement. It is against the law to copy this software on magnetic tape, disk or other medium for any purpose other than the purchaser's personal use, except as specifically described in the license agreement.

There is no warranty implied or stated for accuracy or suitability for any purpose.

You may not disassemble, decompile, reverse-engineer or in any other way attempt to inspect, modify, or copy this product.

This book was created independently by Richard E. Harvey.

This product is proprietary intellectual property, protected by United States and international copyright. Do not alter or remove any copyright, authorship, or any other notices. Do not re–distribute any source code, or source code derived in any way from this source code or documentation, by any means, electronic, printed or otherwise.

All other brand or product names mentioned are trademarks or registered trademarks of their respective holders.

Unregistered use of this book after the evaluation period is a violation of U. S. and international copyright laws.

Prices, specifications, availability, and everything else, are subject to change without notice.

The HTMLcat name is a trademark of Richard. E. Harvey.

Redistribution

You must not remove or alter any file that is included with this product. The distribution file, named HTMLCAT.ZIP, must not be altered in any way.

Only the evaluation version of this book may be copied. The evaluation version is clearly labeled in many ways to distinguish it from the registered version. If you don't see notices like "Evaluation edition," you cannot redistribute the book. You are reading the evaluation edition right now.

You cannot resell this book. You cannot charge or request donations, or in any way receive payment for the distribution or use of this book. If distributed electronically, no charges may be made beyond standard connection charges or membership fees; you cannot charge any extra premium for downloading this book.

You cannot redistribute this book with any other product without prior written permission.

Before packaging this book for redistribution or bundling with anything, such as a CD-ROM, you must ask for written permission.

You must make frequent checks at the Internet home page to make sure you have the latest release.

It would be nice if you would send E-mail telling me where you are, and include the URL you use to reference HTMLCAT.ZIP.

In short, please treat everyone as you would like to be treated, support the products you use, and acknowledge the importance of intellectual property laws.

Yes, we are interested in bundling agreements and creating custom editions.

For more information, contact:

Richard E. Harvey
P. O. Box 5695
Glendale, AZ  85312  USA

E-mail: r_harvey@compuserve.com

See HTMLCAT.DLL.

This is not free software. You may use this book for up to fourteen days for evaluation. If you continue to use this tool, you must register and pay for it.


Attention Help File Decompilers

The copyright notice shown on the previous page does not allow anyone to take this book apart. Any techniques used herein are proprietary.

This book is not designed to be recompiled—it will have flaws and missing functionality. It is not worth the time and effort required to patch it. If it's worth the time to take apart, it's certainly worth a few dollars to buy it.

Features missing from the evaluation edition really are missing—they are not hiding anywhere in the file.

This book represents several thousand hours of work. Please do not steal it.

If someone who did make software changes jobs and makes loaves of bread instead, would it be all right to steal their bread?

No person has the right to decide how other's intellectual property should be treated. Your rights do not override the rights of others.

If you find the design of this book interesting and you would like to see this level of detail and care in help files furnished with your products, please write. We do consulting, custom programming, and documentation.

What you do not like when done to yourself, do not do unto others.
- Confucius, 495 BC.


Demo - No, it's not hiding here. It's only a few dollars, so why not just buy it?


 Setup

Thank you for evaluating HTMLcat. Installation is simple:

•	Extract the files from the Zip archive.

•	See HTMLCAT.TXT for additional information.

•	Copy the files to a convenient sub-directory. Always copy the help file and DLL to the same directory. Do not copy the DLL to the Windows or System directory.

•	If you are using Windows 3.1, see the special instructions, below.

•	Create a shortcut association to the help file to make it easier to open this book.

The only files required to use HTMLcat are the help file HTMLCAT.HLP and the macro file HTMLCAT.DLL. All other files are optional.

HTMLcat Files

File name	Contents

HTMLCAT.CNT	Contents information for 32-bit help viewers. Available only with the registered release of this book.

HTMLCAT.DLL	Macros and utilities used by HTMLcat. This 32-bit DLL must be installed in the same directory as HTMLCAT.HLP for HTMLcat to work correctly.

HTMLCAT.HLP	This Windows help file. This is the complete HTMLcat book.

HTMLCAT.GIF	88x31 pixels 0.7KB bitmap picture. "Supports HTMLcat <?>" button.

HTMLCAT.TXT	Includes basic installation information

HTMLCAT.W31	This is the 16-bit DLL, required if you are using Windows 3.1.

COLORCAT.HLP	COLORcat help file. Color swatches with pop-up font color examples. Includes pop-up color samples with text. You can start or switch to this book by selecting the topic in the Edit menu. Available only with the registered release of this book.

SAMPLES.ZIP	Contains the sample documents and pictures. Available only with the registered release of this book.

Sample Files

You may use any of these examples in any way for your own Internet development. These files are contained in the archive SAMPLES.ZIP. After installing the samples, load INDEX.HTM in your browser to view the sample documents.

Document Name	Document Contents

BOILERPL.HTM	This is the HTML document shown on the Boilerplate Document page in this book.

COLORNAV.HTM	Named color swatches. Similar swatches are shown on the Color Names page.

COLORS.HTM	Color schemes. These samples are also shown in pop-up windows on the Applying Color page.

COLORWEB.HTM	Samples of the 216 Web-safe colors. Swatches are also shown on the Web-Safe Color Swatches page.

FONTS.HTM	Live samples of popular fonts used in Internet documents. See the Font Samples page.

FRAMENDX.HTM	Used with FRAMES.HTM. This document contains the index shown on the left column of the framed window.

FRAMES.HTM	Sample frame document. Open this file with your browser to navigate through the sample documents with frames.

GRAPH.HTM	Simple stacked bar charts using pictures or table cells. Uses three small pictures, GRAPH-B.GIF, GRAPH-R.GIF, and GRAPH-Y.GIF to fill the bars.

HOWNOTTO.HTM	Hackneyed HTML. A template for what not to do.

INDEX.HTM	This is the main document. Open this file with your browser to view all the sample documents.

INDEXOLD.HTM	This document shows how to use the META tag to load another HTML document.

NOFRAMES.HTM	This small document shows how to use META and BASE to load a document and escape from unwanted frames.

PERSONAL.HTM	A simple, personal HTML page. Useful as a starting point to create a personal Web site. Uses BKG-YELO.GIF for the background.

PICTURES.HTM	Compares GIF, JPG and PNG picture quality and compression.

STYLES.HTM	Examples using a style sheet, direct styles, and immediate formatting.

STYLES.CSS	Style sheet used by STYLES.HTM.

SYMBOLS.HTM	Similar to the Special Characters page in this book.

TABLES.HTM	Examples of HTML tables. Uses BKG-LEAF.GIF for the background.

TAGDEMO.HTM	Sample HTML document shows commonly-used tags.

Picture Name	Bitmap Picture Contents

ANYTHING.GIF	88x31 pixels 0.7KB. "Best with Anything" button.

ANY-HTML.GIF	88x31 pixels 6.0KB. Example animated GIF picture.

ASCIICAT.GIF	88x31 pixels 0.7KB. "Look Up ASCIIcat" button.

BKG-LEAF.GIF	205x205 pixel background—fall leaves. Used by TABLES.HTM.

BKG-YELO.GIF	1200x12 background with graduated blue stripe on the left of a light yellow field. Used by PERSONAL.HTM.

COLORWEB.GIF	435x94 example of the 216 Web-safe colors. Used by COLORWEB.HTM and PICTURES.HTM.

COLORWEB.PNG	The same image as COLORWEB.GIF, saved as a PNG picture. It is smaller than the original. Used by PICTURES.HTM.

COLORWEB.JPG	The same image as COLORWEB.GIF, saved as a JPG picture. It is the same size as the original, but the quality is lower. Used by PICTURES.HTM.

GRAPH-B.GIF	12x6 blue rectangle. Used by GRAPH.HTM to create bar charts.

GRAPH-R.GIF	12x6 red rectangle. Used by GRAPH.HTM to create bar charts.

GRAPH-Y.GIF	12x6 yellow rectangle. Used by GRAPH.HTM to create bar charts.

HTMLCAT.JPG	The same image as HTMLCAT.GIF, saved as a JPG picture. It is larger than the original. Please do not use this button on your Web pages; HTMLCAT.GIF and HTMLCAT.PNG are much more attractive! Used by PICTURES.HTM.

HTMLCAT.PNG	The same image as HTMLCAT.GIF, saved as a PNG picture. It is larger than the original. Used by PICTURES.HTM.

HTMLCAT2.GIF	50x47 pixels 0.7KB. The "<?>" logo.

MAP-TAG.GIF	159x103 pixels. Example for MAP and AREA tags.

TEA.GIF	264x300 pixels. Gray tea drinkers, with transparent background.

TEXTURE.GIF	Example of photographic image. Used by PICTURES.HTM.

TEXTURE.JPG	The same image as TEXTURE.GIF, saved as a JPG picture. It is much smaller than the original. Used by PICTURES.HTM.

TEXTURE.PNG	The same image as TEXTURE.GIF, saved as a PNG picture. Slightly smaller than the original. Used by PICTURES.HTM.

TEXTURE8.GIF	Severely color restricted version of TEXTURE.GIF. It shows how we can use color reduction to add style and to minimize download time. Used by PICTURES.HTM.

GIF Buttons

All pictures are as small as possible (bandwidth isn't free). They use 16-color palettes and optimization to minimize file sizes.

The picture htmlcat2.gif is a cool "<?>" picture without text. Here's the HTML to use it:

<A HRef = "http://ourworld.compuserve.com/homepages/r_harvey" Target = "_top">

<IMG Src = "htmlcat2.gif" Width = 50 Height = 47 Border = 0 Alt = "HTMLcat"></A>

The second picture, HTMLCAT.GIF, is the same proportions as other "supports" GIF pictures, such as those Netscape and Internet Explorer use. Here's how to use it:

<A HRef = "http://ourworld.compuserve.com/homepages/r_harvey/htmlcat.htm" Target = "_top">

<IMG Src = "htmlcat.gif" Width = 88 Height = 31 Border = 0 Alt = "HTMLcat"></A>

HTML is a portable document specification. The ideal document looks good on anything—any display device or printed output. If yours' are portable, not beholding to one company's proprietary standards, say so with ANYTHING.GIF:

<P>Best viewed with:
<A HRef = "http://ourworld.compuserve.com/homepages/r_harvey/htmlcat.htm" Target = "_top" Title = "Best viewed with. . . Anything!">

<IMG Src = "anything.gif" Width = 88 Height = 31 Border = 0 Alt = "Best viewed with Anything!"></A>

About HTMLCAT.DLL

This custom DLL (Dynamic Link Library) contains text, lists and a program, that turn HTMLcat into a help application. It also offers a small utility that describes the current display settings. Click HTMLCAT.DLL to see how your computer monitor is configured.

•	Screen size is the width and height of the display device, represented as pixels.

•	Window size is the size of the main HTMLcat window. You can use this value to quickly calculate the size you need for a table or picture; resize the HTMLcat window to approximately the size you need, then look at the window size.

•	Pixels per inch is the approximate number of pixels per inch on the screen. Most computer configurations assume that there are 96 pixels per inch; some configurations, often with a small monitor set to very high resolution, assume 120 pixels per inch. Small screen fonts are standard; when we use 120 pixels per inch, the operating system scales fonts and some pictures approximately 20 percent larger, to improve readability with the smaller pixel size.

•	Color depth is the number of bits of memory required to display each pixel on the screen. A value of 8 is 256-color mode; 16 is 64,000 color mode, and 24 or higher means millions of colors. If this value is 24 or higher all colors on the screen are pure, without color dithering. This feature is designed for 32-bit Windows.

Windows 3.1 Special Instructions

HTMLcat requires a special DLL file for Windows 3.1. Do not use the standard HTMLCAT.DLL. The Windows 3.1 DLL is named HTMLCAT.W31; rename this file to HTMLCAT.DLL before opening the help file. First close this book, then follow these steps:

REN HTMLCAT.DLL HTMLCAT.W32
REN HTMLCAT.W31 HTMLCAT.DLL

Now, start HTMLCAT.HLP as you normally would. While the 16-bit DLL is smaller than the 32-bit DLL, they are functionally the same; 16-bit programs are often smaller than 32-bit counterparts.

To see three-dimensional effects in dialog boxes on Windows 3.1, the file CTL3D.DLL must be installed in the \WINDOWS\SYSTEM directory. This file is installed automatically by many applications; it is not supplied with HTMLcat.

If you have gotten this far and you are reading this, relax, you've installed the correct DLL. Click on HTMLCAT.DLL to see if you are using the 16- or 32-bit version.

Troubleshooting

This is a standard Windows help file, designed for viewing with WINHELP.EXE or WINHLP32.EXE.

•	Your computer must be running Windows 3.1 or later.

•	If you receive the error message 'Cannot find or run the file or program "clipbrd.exe"' when you select Clipboard Viewer, your computer does not have the clipboard viewer installed. Install the program file from the Windows distribution disk.

•	Microsoft Windows 98 and later and Microsoft Windows 95 with Internet Explorer 4 or later installed will configure Windows Explorer to hide files that have the DLL file name extension. If you move HTMLCAT.HLP to a different folder, you must also move HTMLCAT.DLL. To do this you must be able to see the DLL. You can display System Files in Explorer by going to the View menu (not the Views button), and selecting Folder Options. Now select the View tab until you see the "Hidden files" section. There are three options:  "( )  Do not show hidden or system files",  "(x)  Do not show hidden files", and  "( )  Show all files." Select the second item, then click the Apply button, and the DLLs will come back. Mostly, showing DLLs just makes the file list messy, so you can change it back when it isn't important.

•	Some illustrations require a color display. A display with 640x480 or greater resolution offers more accurate illustrations. See HTMLCAT.DLL for information about your current display settings.

•	If you are using Microsoft Windows 95 or later, the Contents button will pop-up a separate contents window. If you want to use the built-in Contents, select the "Main Contents" item in the File menu to jump to the built-in contents page. You can also right-click the mouse and select "Main Contents" from the pop-up menu. See Navigation Tips for instructions about how to always use the built-in contents page.

•	This book requires the dynamic link library named HTMLCAT.DLL. Always use the version of HTMLCAT.DLL furnished with the same copy of HTMLCAT.HLP. To make sure you are using the correct DLL, open the Help menu, then select "About HTMLcat..."; note the book version number, then click HTMLCAT.DLL.; if the versions do not match, install the product again from the original distribution disk or compressed archive file. Install all files in the same directory.

•	Microsoft Windows 95 and later and Windows NT require the 32-bit file HTMLCAT.DLL. By default, the 32-bit DLL is installed.

•	If you are using Windows 3.1, use the 16-bit DLL; for Windows 95 or later, use the 32-bit DLL. See the Windows 3.1 special instructions, above, for more information.

•	Pop-up dialog boxes have three-dimensional effects in 32-bit operating systems. To see three-dimensional effects with Windows 3.1, the file CTL3D.DLL must be available in the \WINDOWS\SYSTEM directory. CTL3D.DLL is not furnished with this product; it is installed by many Windows applications.

•	External links, such as HTMLCAT.TXT and Internet addresses, require a Windows file association. If you do not have a default browser installed or an Internet connection, or if the files are not available, many links will not work correctly.

•	Apple Macintosh help viewers cannot display some vector graphic illustrations.

•	Not all mouse clicks have keyboard equivalents. For example, while you can press ALT+CTRL+SHIFT while you click a mouse button, the ENTER key does not accept all key combinations.

•	Keyboard support is not complete or consistent in all Windows help viewers. For example, you can press F6 to switch between the main and Tags window, but TAB key support may remain in the incorrect window (this works correctly in Windows 3.1, but not in Windows 95).

•	What happened to the Web Sites page? It has been replaced by the Web Sites... list.

•	There may be short delays while some pages are displayed. This may happen when large font samples are rendered or complex illustrations are drawn. The registered edition of this book loads somewhat faster than the evaluation edition.

•	Color swatches and some illustrations look best when displayed on 16- or 24-bit color display devices. You can use any color display, but colors may be rendered inaccurately or using dithering, which combines colors in patterns to simulate other colors.

•	Close all open help files before using quick-resolution, screen resolution, or color depth change utilities.

•	Make sure you have standard TrueType fonts installed. We use Arial, and Times New Roman. Some dialog boxes use the Arial Narrow font (furnished with Lotus Smart Suite and Microsoft Office) for displaying lists; if this font is not installed, lists are displayed in the Arial font, which may cause some text to be truncated.

•	If you open multiple copies of this book simultaneously, only one copy will have access to the Tags button. If you close then reopen the Tags window, the window returns to the default position and size. If you want to move the Tags window, it is best to leave it open all the time, and simply minimize it or let it fall below the active window, between use.

•	In Windows 3.1x, closing the main window does not always close the Tags window. You may have to close both windows separately. Click on the stylized triangular change-window icon at the top of the Tags window to restore the main window.

•	If the Tags window is placed on top of the main window, clicking the triangular change-window icon may pass the mouse click to the main window.

•	Many features are available only when you register. There are no Registration reminders in the registered edition.

About ASCIIcat

If you haven't tried ASCIIcat, you owe it to yourself. It's free, and you will likely use it every day. You can offer copies to guests to your Web site. You don't have your copy of ASCIIcat? Here's the link:

http://ourworld.compuserve.com/homepages/r_harvey/asciicat.htm

 When ASCIIcat is installed in the same directory as HTMLcat, an ASCIIcat menu item is added to the Edit menu.

  Articles


Download Times

KB	9.6	14.4	28.8	33.6	56K

2	3	2	1	1	1

3	3	2	1	1	1

4	4	3	2	1	1

5	5	4	2	2	1

6	6	4	2	2	1

8	9	6	3	3	2

10	11	7	4	3	2

12	13	9	4	4	2

15	16	11	5	5	3

20	21	14	7	6	4

25	27	18	9	8	5

30	32	21	11	9	6

40	43	29	14	13	8

50	53	36	18	16	9

60	69	43	21	19	11

80	75	57	29	25	14

Formatting and display time not included!


Hex Table

%	Dec	Hex

0%	0	0

10%	26	1A

20%	51	33

25%	64	40

31%	80	50

33.3%	85	55

40%	102	66

50%	128	80

60%	153	99

75%	192	C0

80%	204	CC

90%	230	E6

100%	255	FF

Character Conversion


ID

Class

Style

Title


Dir

Lang


OnClick	OnMouseDown

OnDblClick	OnMouseMove

OnKeyDown	OnMouseOut

OnKeyPress	OnMouseOver

OnKeyUp	OnMouseUp


MSHTML events

OnAfterUpdate	OnBeforeUpdate

OnBlur	OnClick

OnDblClick	OnFocus

OnHelp	OnKeyDown

OnKeyPress	OnKeyUp

OnMouseDown	OnMouseMove

OnMouseOut	OnMouseOver

OnMouseUp


MSHTML events

OnClick	OnMouseMove

OnDblClick	OnMouseOut

OnHelp	OnMouseOver

OnMouseDown	OnMouseUp


MSHTML events

OnAfterUpdate	OnHelp

OnBeforeUpdate	OnKeyDown


MSHTML events

OnAfterUpdate	OnBeforeUpdate

OnBlur	OnClick

OnDblClick	OnFocus

OnHelp	OnKeyDown

OnKeyPress	OnKeyUp

OnMouseDown	OnMouseMove

OnMouseOut	OnMouseOver

OnMouseUp	OnScroll


MSHTML events

OnAfterUpdate	OnBeforeUpdate

OnBlur	OnClick

OnDblClick	OnFocus

OnHelp	OnMouseDown

OnMouseMove	OnMouseOut

OnMouseOver	OnMouseUp


MSHTML events

OnAfterUpdate	OnBeforeUpdate

OnBlur	OnClick

OnDblClick	OnFocus

OnHelp	OnKeyDown

OnKeyPress	OnKeyUp

OnMouseDown	OnMouseMove

OnMouseOut	OnMouseOver

OnMouseUp


MSHTML events

OnAfterUpdate	OnBeforeUpdate

OnBlur	OnClick

OnDblClick	OnFocus

OnHelp	OnKeyDown

OnKeyPress	OnKeyUp

OnLoad	OnMouseDown

OnMouseMove	OnMouseOut

OnMouseOver	OnMouseUp

OnReadyStateChange


MSHTML events

OnDblClick	OnMouseOver

OnHelp	OnMouseUp

OnMouseDown	OnReset

OnMouseMove	OnSubmit

OnMouseOut


MSHTML events

OnFocus

OnLoad

OnUnload


MSHTML events

OnBlur

OnFocus


MSHTML events

OnAbort	OnAfterUpdate

OnBeforeUpdate	OnBlur

OnClick	OnDblClick

OnError	OnFocus

OnHelp	OnKeyDown

OnKeyPress	OnKeyUp

OnLoad	OnMouseDown

OnMouseMove	OnMouseOut

OnMouseOver	OnMouseUp

OnReadyStateChange


MSHTML events

OnAfterUpdate	OnBeforeUpdate

OnBlur	OnChange

OnClick	OnDblClick

OnFocus	OnHelp

OnKeyDown	OnKeyPress

OnKeyUp	OnMouseDown

OnMouseMove	OnMouseOut

OnMouseOver	OnMouseUp

OnResize	OnSelect


MSHTML events

OnClick	OnDblClick

OnHelp	OnKeyDown

OnKeyPress	OnKeyUp

OnMouseDown	OnMouseMove

OnMouseOut	OnMouseOver

OnMouseUp


MSHTML events

OnAfterUpdate	OnBeforeUpdate

OnBounce	OnClick

OnDblClick	OnFinish

OnHelp	OnKeyDown

OnKeyPress	OnKeyUp

OnMouseDown	OnMouseMove

OnMouseOut	OnMouseOver

OnMouseUp	OnStart


MSHTML events

OnAfterUpdate	OnBeforeUpdate

OnBlur	OnClick

OnDblClick	OnFocus

OnHelp	OnKeyDown

OnKeyPress	OnKeyUp

OnLoad	OnMouseDown

OnMouseMove	OnMouseOut

OnMouseOver	OnMouseUp

OnReadyStateChange	OnRowEnter

OnRowExit


MSHTML events

OnAfterUpdate	OnBeforeUpdate

OnClick	OnDblClick

OnHelp	OnKeyDown

OnKeyPress	OnKeyUp

OnMouseDown	OnMouseMove

OnMouseOut	OnMouseOver

OnMouseUp


MSHTML events
MSHTML and Internet Explorer 4 define actions, from simply moving the mouse over the object to selecting it, that can trigger events. Large, complex documents may have special event-handling Applets.